http-live-streamingvideo.jshttp-streaming

video.js http-streaming resolution quality picker not showing in UI

I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/

As per the docs, here is my HTML. But quality/resolution control is missing

What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.

enter image description here

<html>

<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>

<body>

  <video-js id=example-video-hls class="vjs-default-skin" controls>
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
      type="application/x-mpegURL">
  </video-js>

  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-quality-levels@2.1.0/dist/videojs-contrib-quality-levels.js"></script>

  <script>
    var player = videojs('example-video-hls');
    player.play();
  </script>


</body>

</html>
Solution

  • videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.

    That example is using videojs-http-source-selector for the menu.