使用 video-js 的播放速度控制未显示？

Question

我正在尝试向 video.js 播放器添加控件以允许用户更改播放速度。根据他们的文档，我应该能够传递一个数组，其中包含我想要提供给用户的播放速率。例如：

playbackRates: [0.5, 1, 1.5, 2]

.

我发现了这个类似的问题，他建议完全按照医生所说的去做。这个答案链接到许多人声称有效的a snippet。不幸的是，此代码片段没有显示任何更改播放速度的控件。 是我运行截图时看到的。我尝试自己实现一个具有播放速度的简单播放器，但它不允许我更改播放速度：

<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

不再支持这个了吗？

Answer 1

支持。该代码片段不起作用（它甚至不初始化 Video.js），因为它使用 http 而不是 https URL 作为播放器脚本和 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

Answer 2

如果有帮助的话，启用视频播放器速率对我有用！您只需将鼠标悬停在显示描述上（在右侧样式下）即可启用或禁用您可能必须使用 ctrl + shift + I 才能访问检查页面

这里有一个更好的帮助的快照

Answer 3

检查 controlBar.children 对象中是否定义了“playbackRateMenuButton”项。

var options = {
    controls: true,
    autoplay: false,
    muted: true,
    preload: 'metadata',
    loop: true,
    fluid: true,
    controlBar: {
        children: [
            'playToggle',
            'progressControl',
            'volumePanel',
            'playbackRateMenuButton', <--- this bit here
            'qualitySelector',
            'fullscreenToggle',
        ],
    },
    playbackRates: [0.5, 1, 1.5, 2]
};

var player = videojs('my-player', options, function() {
});

这就是为我做的。