HTML5视频下拉质量hls.js

Question

我使用标签html5视频 + hls.js进行视频流。M3U8HOE

<div class="container-video"> 
            <video id="video" 
                width="700" 
                height="400"
                preload="auto" 
                controls>
                <source [src]="videoLink" type="application/x-mpegURL">
            </video>
        </div>

  playVideoLive(videoLink) {
      const video = document.getElementsByTagName('video')[0];
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoLink);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          video.play();
        });
      }
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoLink;
        video.addEventListener('canplay', function () {
          video.play();
        });
    }
  }

我可以显示质量视频列表的下拉列表吗？

Answer 1

您可以使用额外的软件包添加A轨道选择器 - 可能还有其他包装，但这似乎很受欢迎： https://www.npmjs.com/package/videojs-hls-quality-selector

您也可以添加自己的控件，并通过API使用：

有一个演示在此处使用API​​（在写作时） - 转到演示页面的底部以查看级别，您可以单击它们在那里：