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