javascript - 如何将新组件(按钮)添加到 video.js？

Question

我的问题是如何在 video.js 播放器上添加新组件(控制按钮)。

例如，添加一个按钮以允许更改视频播放速率。

举一个简单的例子会很有帮助。非常感谢。

Answer 1

看起来 VideoJS 不直接支持播放速率，但据我了解，它只是 HTML5 视频元素的精美包装器。

根据 this stack overflow question/answer您可以直接在 W3C HTML5 Video Wiki Entry 引用的 DOM 元素上更改 HTML5 视频的播放速率.

您可能不得不绕开 VideoJS 来执行此操作，因为支持看起来并不成熟。此外，浏览器之间可能会因支持此属性而出现问题。

至于简单地添加控件，VideoJS 实现了一个 Javascript API您可以使用它来控制元素，但它似乎仅限于最基本的控件(播放/暂停/转到/全屏/等...)

播放器的默认控件似乎无法高度自定义，因此如果您希望提供更清晰的体验，您可以禁用视频内控件并在下面的 html/dom/js 中重新实现您自己的控件视频元素。

示例:

使用一些非常简单的 html 和 Javascript，您可以连接一些简单的控件。

HTML:

<video id="Vid" ...>
</video>
<div id="Controls">
 <a id="Play" href="#Play">Play</a> - <a id="Pause" href="#Pause">Pause</a>
</div>

JS:

_V_("Vid").ready(function() {
  var player = this;

  var playbutton = document.getElementById("Play");
  var pausebutton = document.getElementById("Pause");

  playbutton.onclick = function(event) {
    player.play();
  };

  pausebutton.onclick = function(event) {
    player.pause();
  };

});