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下载