【video】hls.js播放m3u8示例

hls.html：

<html><head>
    <title>Hls.js demo - basic usage</title>
  </head>

  <body>
    <script src="hls.js"></script>

    <center>
      <h1>Hls.js demo - basic usage</h1>
      <video height="600" id="video" controls="" src="Elecard_about_Tomsk_part1_HEVC_UHD.mp4"></video>
    </center>

    <script>
      var video = document.getElementById('video');
      if (Hls.isSupported()) {
        var hls = new Hls({
          debug: true,
        });
        hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
        //hls.loadSource('./hls/lucene.m3u8');
        hls.loadSource('./hls265/h265.m3u8');
        //hls.loadSource('./hls_avi/avi.m3u8');
        //hls.loadSource('./hls_avi_audio/aviaudio.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      }
      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
      // This is using the built-in support of the plain video element, without using hls.js.
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
        video.addEventListener('canplay', function () {
          video.play();
        });
      }
    </script>
  

</body></html>

hls资源：

 

 

 

 使用http-server启动服务：

 

 结果如下：

 

 

 

posted @ 2021-05-14 14:48  vickylinj  阅读(3393)  评论(0)  编辑  收藏  举报