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

Posted 2023-05-07

【中文标题】如何在 video.js 上添加新组件（按钮）？

【英文标题】：How to add new components(buttons) onto video.js?

【发布时间】：2012-05-29 12:05:19

【问题描述】：

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

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

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

【参考方案1】：

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

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

您可能不得不避开 VideoJS 来执行此操作，因为该支持看起来并不成熟。此外，浏览器之间可能存在过度支持此属性的问题。

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

播放器的默认控件似乎没有很大的可定制性，因此如果您希望提供更清晰的体验，您可以禁用视频内控件并在 html/dom/js 下方的 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();
  ;

);

【讨论】：

谢谢！有详细的流程吗？

【参考方案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