video.js UI 中未显示 http 流分辨率质量选择器

Question

我正在尝试重新创建此处显示的播放器 - https://videojs-http-streaming.netlify.app/

作为per the docs，这是我的HTML。但是 quality/resolution 缺少控件

需要在此 HTML 中更改哪些 quality/resolution 选择器才能在播放器中呈现，如 demo page 中所示。

<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>

Answer 1

videojs-contrib-quality-levels 添加质量选择器 API，但不包含 UI 组件。

该示例使用 videojs-http-source-selector 作为菜单。

video.js UI 中未显示 http 流分辨率质量选择器

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

http-live-streaming

http-streaming

video.js