cyberPliayer播放hls视频流

cyberplayer.jsHTML5播放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下载