網頁前端video播放m3u8(HLS)

HLS (HTTP Live Streaming)是Apple公司研發的流媒體傳輸技術，包括一個m3u8的索引文件、多個ts分片文件和key加密串文件。這項技術主要應用於點播和直播領域。

開源JS庫（Github）：

【video.js】https://github.com/videojs/videojs-contrib-hls
【hls.js】https://github.com/video-dev/hls.js/

騰訊視頻SDK（TCPlayerLite），文檔地址：https://cloud.tencent.com/document/product/881/20207

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>

  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  
</head>
<body>
  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
  </video>
  
  <script>
  </script>
  
</body>
</html>

注：可以指定多個source標簽。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式視頻</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
    <!-- videojs-contrib-hls 用於在電腦端播放 如果只需手機播放可以不引入 -->
</head>
<body>
    <style>
        .video-js .vjs-tech {position: relative !important;}
    </style>
    <div>
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
            <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>
        </video>
    </div>
    <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切換視頻</div>
</body>
 
<script>
    // videojs 簡單使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判斷視頻源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加視頻源的時候需要給新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();
    }
    var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';
    document.querySelector('.qiehuan').addEventListener('click', function () {
        changeVideo(src);
    })
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【video】hls.js播放m3u8示例 3-視頻傳輸,監控,直播方案-網頁端播放視頻流(RTMP,HLS,m3u8) 前端播放m3u8格式視頻 vue video標簽播放.m3u8格式文件 vue使用video.js解決m3u8視頻播放格式 vue中使用video標簽實現對m3u8流格式視頻的播放流媒體技術學習筆記之（四）解決問題video.js 播放m3u8格式的文件,根據官方的文檔添加videojs-contrib-hls也不行的原因解決了關於流媒體(m3u8)的播放與下載播放M3U8的js代碼 HLS協議之m3u8和ts流格式詳解