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

     结果如下:

     

  • 相关阅读:
    MVVM
    vue-cli初始化项目2.x|3.x
    逻辑覆盖
    white box白盒测试
    black box黑盒测试
    总结回顾js arr的常见方法以及相关的使用场景(一)
    js 原生功底 (一)
    markdown 语法总结(一)
    阿里一面,面试官想看到的究竟是什么,带你揭秘!!!!
    关于Axios 源码你想了解的 在这儿
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14768536.html
Copyright © 2011-2022 走看看