html5 video dropdown quality hls.js

Question

I'm use a tag html5 video + hls.js for video streaming .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();
        });
    }
  }

Hoe i can show the dropdown with the list of quality video?

Answer 1

You can use an extra package to add the a track selector - there may be others but this one seems quite popular: https://www.npmjs.com/package/videojs-hls-quality-selector

You can also add your own controls and do it via the API using: https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel

There is a demo which uses the API here (at the time of writing) - go to the bottom of the demo page to see the levels and you can click on them there: https://hls-js-dev.netlify.app/demo/