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启动服务:

     结果如下:

     

  • 相关阅读:
    Lifegame第一阶段任务
    软件工程 第一次实验 Git代码版本管理
    个人作业——软件工程实践总结&个人技术博客
    个人技术总结-Android hellocharts折线图
    结对第二次作业——某次疫情统计可视化的实现
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    第六次作业
    第五次作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14768536.html
Copyright © 2011-2022 走看看