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

時間 2019-12-14

標籤 html5 html 播放 m3u8 視頻 web 直播欄目 HTML5 简体版

原文原文鏈接

<!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>

注意的地方，必須是經過服務器訪問，纔有效。
直接右擊打開，看不到效果。html

能夠更改地址，很靈活，很方便。git

相關標籤/搜索