1

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

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

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

4

2 回答 2

2

它没有出现 VideoJS 直接支持播放速率，但据我了解，它只是 HTML5 视频元素的精美包装。

根据这个堆栈溢出问题/答案，您可以直接在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();
  };

});
于 2012-05-22T23:38:22.537 回答
1

在自己搜索后，我发现在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

于 2012-11-20T19:53:18.480 回答