html5视频下拉质量hls.js

Question

我使用标记html5视频+ hls.js进行视频流.m3u8

<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

您可以使用一个额外的包来添加一个轨道选择器--可能还有其他的，但是这个看起来很流行：https://www.npmjs.com/package/videojs-hls-quality-selector。

您还可以添加自己的控件，并通过API使用：https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel进行操作。

这里有一个使用API的演示程序(在编写本文时)--转到演示页面的底部查看各个级别，您可以在那里单击它们：https://hls-js-dev.netlify.app/demo/。