cyberPliayer播放hls视频流
cyberplayer.js
之前看到过百度cyberplayer播放器,兼容各个方面觉得做的比较好,就拿过来用了,大家可以直接看着改地址demo播放器
HTML5播放hls
<div id="playercontainer"></div>
<script type="text/javascript" src="./player/cyberplayer.js"></script>
<script type="text/javascript">
var player = cyberplayer("playercontainer").setup({
width: 680,
height: 448,
isLive: true, // 必须设置,表明是直播视频
file: "http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8", // <—hls直播地址
autostart: true, //自动播放
stretching: "uniform", //按照宽高百分比放大,exactfit:充满整个div,这两个参数值可能够大家使用了
volume: 100,
controls: true,//控制进度条
hls: {
reconnecttime: 5 // hls直播重连间隔秒数
},
ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey
});
</script>
效果:
注意
播放hls时,需要把3.4.0下的video文件夹中js拷贝过来,同时需要修改cyberplayer.js,其中有这样一段:
function (a, b, c) {
var d, e;
d = [], void 0 !== (e = function () {
return {
repo: "static/js/cyberplayer/",
SkinsIncluded: ["bce"],
SkinsLoadable: ["beelden", "bekle", "five", "glow", "roundster", "six", "seven", "stormtrooper", "vapor"],
dvrSeekLimit: -25
}
}.apply(b, d)) && (a.exports = e)
}
repo改为3.4.0文件夹前边的路径,用于加载hls时,找到video.min.js
采用cyberplayer很方便,不用大家去封装其它js什么的,修改样式可以直接改cyberplayer.js,此处我没有填写ak,直接把未注册百度云div删除了,还有百度云图标也直接删除了。相比较于rtmp播放,hls播放更快,基本获取到流1秒钟不到就能加载开始播放,rtmp获取到流之后,加载播放需要三秒左右,这样一对比优势就体现出来了,可以看看我写的另一篇rtmp直播。
js下载