SkeyeWebPlayer免费网页直播点播播放器-页面动态添加多个播放器

打响第一枪

于 2024-01-25 22:20:25 发布

阅读量307

点赞数 8

文章标签： javascript

本文链接：https://blog.csdn.net/wcxrib/article/details/135855099

版权

强大的网页直播/点播播放器 SkeyeWebPlayer，使用简单，功能强大，终身免费使用，支持Windows、 Android、iOS平台。

SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP、FLV、HLS等多种流媒体协议播放，视频编码支持H.264，H.265，音频支持AAC，支持TCP/UDP协议，是一套极佳的且适合用于综合安防视频云服务播放组件，已经非常稳定、完整。功能包括：直播、录像、抓图，目前在功能性、稳定性、可扩展性和完整性极强的一款H5播放器！

支持Websocket-RTSP播放;
支持 m3u8(HLS) 播放;
支持 HTTP-FLV/WS-FLV 播放;
支持 HEVC/H265 播放;
支持直播和点播播放;
支持全屏显示;
支持重连播放；
具有 H.264 + AAC 编解码器播放功能
HTTP FLV RTSP低延迟实时流播放 (HLS延时稍大一点，大概在2s—3s左右)
WS-FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速
支持全屏或比例显示;
支持播放器快照截图;
支持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不要重复）

打响第一枪

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
SkeyeWebPlayer免费网页直播点播播放器-页面动态添加多个播放器

SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP、FLV、HLS等多种流媒体协议播放，视频编码支持H.264，H.265，音频支持AAC，支持TCP/UDP协议，是一套极佳的且适合用于综合安防视频云服务播放组件，已经非常稳定、完整。强大的网页直播/点播播放器 SkeyeWebPlayer，使用简单，功能强大，终身免费使用，支持Windows、 Android、iOS平台。(1)、动态添加播放器页面示例。
复制链接

扫一扫