没有显示带有 video-js 的播放速度控制？答案

【问题标题】：Playback speed controls with video-js are not showing?没有显示带有 video-js 的播放速度控制？
【发布时间】：2021-02-04 17:56:12
【问题描述】：

我正在尝试向 video.js 播放器添加控件，以允许用户更改播放速度。根据their documentation，我应该能够传递一个具有我想提供给用户的播放速率的数组。例如：playbackRates: [0.5, 1, 1.5, 2]。

我找到了这个similar question，他建议完全按照文档所说的去做。这个答案链接到a snippet，许多人声称它有效。不幸的是，这个 sn-p 没有显示任何改变播放速度的控件。 Here 是我在运行剪辑时看到的。我尝试自己实现一个具有播放速度的简单播放器，但它不允许我更改播放速度：

<video class="video-js" autoplay controls data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

我到底做错了什么？ video.js 不再支持这个了吗？

【问题讨论】：

标签： javascript typescript html5-video video.js

【解决方案1】：

支持。 sn-p 不起作用（它甚至不初始化 Video.js），因为它使用 http 而不是 https URLs 用于播放器脚本和 CSS。这是一个古老的例子，当时浏览器对混合 http/https 没有那么严格。它也是 Video.js 的一个非常旧的版本 - 目前最新的是 7.11.4。

7.11.4 示例：

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

<video-js id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
          data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video-js>

https://codepen.io/mister-ben/pen/ZEBOyYG

【讨论】：

你会碰巧有这样的例子吗？我完全按照文档显示的内容进行操作，但没有显示。