如何在video.js上添加新的组件(按钮)? [英] How to add new components(buttons) onto video.js?

问题描述

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

My question is how to add new components(control buttons) on video.js player.

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

For example, adding a button to allow to change the video playback rate.

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

Giving a simple example would be much helpful. Thank you very much.

推荐答案

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

It doesn't appear VideoJS Supports playback-rate directly, but from my understanding it's just a fancy wrapper for an HTML5 Video Element.

根据此堆栈溢出问题/答案，您可以按照您可能不得不回避VideoJS来执行此操作，因为该支持似乎没有得到支持.此外，浏览器之间可能对此属性的支持存在问题.

You probably will have to side-step VideoJS to do this as the support doesn't look baked in. Also, there may be issues between browsers over support of this attribute.

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

As for simply adding controls, VideoJS implements a Javascript API you can use to control the element but it seems pretty limited to the most basic of controls (play/pause/goto/fullscreen/etc...)

播放器的默认控件似乎没有很大的可定制性，因此，如果您希望提供更清晰的体验，则可以禁用视频内控件，并在html/dom/js下重新实现自己的控件.视频元素.

The default controls the player has don't seem to be greatly customizable so if you wish to provide a clearer experience, you can probably disable the in-video controls and re-implement your own in html/dom/js underneath the video element.

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

With some really simple html & Javascript, you can wire up some simple controls.

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();
  };

});

这篇关于如何在video.js上添加新的组件(按钮)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！