zoukankan      html  css  js  c++  java
  • 【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启动服务:

     结果如下:

     

  • 相关阅读:
    洛谷 P4297 [NOI2006]网络收费
    bzoj 5072: [Lydsy1710月赛]小A的树
    树形背包
    loj #2071. 「JSOI2016」最佳团体
    bzoj 2427: [HAOI2010]软件安装
    bzoj 4987: Tree
    loj #2007. 「SCOI2015」国旗计划
    loj #2006. 「SCOI2015」小凸玩矩阵
    loj #2020. 「AHOI / HNOI2017」礼物
    loj #547. 「LibreOJ β Round #7」匹配字符串
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14768536.html
Copyright © 2011-2022 走看看