SkeyeWebPlayer网页直播点播播放器-页面动态多播放器添加代码示例
2023-06-13 09:18:17 时间
强大的网页直播/点播播放器 SkeyeWebPlayer,使用简单,功能强大, 终身免费使用,支持Windows、 Android、iOS平台。
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP、FLV、HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/UDP协议,是一套极佳的且适合用于综合安防视频云服务播放组件,已经非常稳定、完整。功能包括:直播、录像、抓图,目前在功能性、稳定性、可扩展性和完整性极强的一款H5播放器!
- 支持Websocket-RTSP播放;
- 支持m3u8播放;
- 支持HTTP-FLV、WS-FLV播放;
- 支持HEVC/H265播放;
- 支持直播和点播播放;
- 支持全屏或比例显示;
- 支持播放器快照截图;
- 支持Android、iOS播放;
多播放器示例
(1)、动态添加播放器页面示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.web-media-player {
width: 500px;
}
</style>
</head>
<body>
<div class="web-media-player" id="WebMediaBox">
</div>
</body>
<script src="./dist/SkeyeWebPlayer.js"></script>
<script type="text/javascript">
let urls = [
'rtsp://192.168.0.111:5555/00000000031315178598/0',
'rtsp://192.168.0.111:5555/00000000031315178598/1',
'rtsp://192.168.0.111:5555/00000000031315178598/2',
];
let WebMediaBox = document.getElementById('WebMediaBox');
for (let i = 0; i < urls.length; i++) {
init(i);
}
function init(i) {
let div = document.createElement('div');
div.id = 'WebMediaPlayer_' + i;
WebMediaBox.appendChild(div);
new SkeyeWebPlayer(urls[i], div.id)
}
</script>
</html>
- 变量 urls 数组放入将要播放的多个流地址,这里也可以从其它接口获得。
- 将播放地址和动态生成div的id传入到SkeyeWebPlayer中,初始化时会自动播放,(id不要重复)
相关文章
- Web-Capture在线网页截图抓取整张页面
- 微信授权网页扫码登录php,PHP实现微信开放平台扫码登录源码
- 网页视频下载(TS流下载合成)
- 常见的网页设计布局有哪些?优秀的网页设计都有的8个特点
- 继微信GPT与飞书GPT之后,网页版小妖GPT诞生了
- PHP 网页编码问题详解编程语言
- 网页端Outlook将新增应用栏:快速启用Word等应用
- Linux模拟器:现代网页开发的必备工具(网页linux模拟器)
- 使用Linux编写爬虫程序,高效下载网页资源(linux爬虫下载)
- 网页Redis配置文件实用指南(网页redis的配置文件)
- 网页木马代码例子(里面的文件是漏洞扫描器,呵呵)
- php清除网页病毒的方法
- php网页病毒清除类
- 网页下载文件期间如何防止用户对网页进行其他操作
- PHP网页游戏学习之Xnova(ogame)源码解读(十五)