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

发布于 2025-01-24 06:59:23 字数 1422 浏览 0 评论 0原文

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

​但是,对于该质量/分辨率选择器在播放器中渲染的质量/分辨率控制缺失了

需要更改的内容,如演示页

<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/[email protected]/dist/videojs-contrib-quality-levels.js"></script>

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


</body>

</html>

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/[email protected]/dist/videojs-contrib-quality-levels.js"></script>

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


</body>

</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不…忘初心 2025-01-31 06:59:23

Videojs-contrib质量级别添加了质量选择器API,但不包括UI组件。

该示例正在使用 videojs-http-source-selector

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文