Question

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

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

给出一个简单的例子将会非常有帮助。非常感谢你。

Answer 1

VideoJS不直接支持播放速率，但据我所知，它只是HTML5视频元素的精美包装。

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

你可能不得不支持VideoJS来执行此操作，因为支持看起来并不好看。此外，浏览器之间可能存在支持此属性的问题。

至于简单地添加控件，VideoJS实现了一个Javascript API你可以用来控制元素，但它似乎非常局限于最基本的控件（play / pause / goto / fullscreen / etc ......）< / p>

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

实施例

有一些非常简单的html＆amp; 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();
  };

});

Answer 2

在我自己搜索之后，我发现在tracks.js文件的最底部发生了类似的事情。

// Add Buttons to controlBar
_V_.merge(_V_.ControlBar.prototype.options.components, {
   "subtitlesButton": {},
   "captionsButton": {},
   "chaptersButton": {}
});

来自tracks.js https://github.com/videojs/video.js/blob/master/src/js/tracks.js

如何在video.js上添加新组件（按钮）？

2 个答案:

实施例