html5播放m3u8視訊，web端看直播

桃子紅了吶發表於2017-12-31
HTMLWeb

https://github.com/jiqing9006/hLive

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>fz-live</title>
    <link href="./css/video.css" rel="stylesheet">
    <script src="./js/video.js"></script>
    <script src="./js/videojs-live.js"></script>
</head>

<body>
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup=`{}`>
        <source src="./src/z.m3u8" type="application/x-mpegURL">
    </video>
    <script>
        var liveUrl  =  `http://pili-live-hls.qiniu.yunlutong.com/yunlutong/598daedea95be73db168e955.m3u8`;
        var player = videojs(`my_video_1`);

        player.ready(function() {
            this.src({
                src: liveUrl,
                type: `application/x-mpegURL`,
            });
        });

    </script>
</body>

</html>

注意的地方，必須是通過伺服器訪問，才有效。

直接右擊開啟，看不到效果。

可以更改地址，很靈活，很方便。

本文轉自TBHacker部落格園部落格，原文連結：http://www.cnblogs.com/jiqing9006/p/7574603.html，如需轉載請自行聯絡原作者


相關文章