【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啟動服務:

 

 結果如下:

 

 

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM