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

编程问答 2022-05-27

问题描述

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

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

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

我到底做错了什么？ video.js 不再支持此功能了吗？

解决方法

支持。该代码段不起作用（它甚至不初始化 Video.js），因为它对播放器脚本和 CSS 使用 http 而不是 https URL。这是一个古老的例子，当时浏览器对混合 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

html5-videojavascripttypescripttypescripttypescriptvideo.js