Question

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.

Answer 1

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

According to this stack overflow question/answer you can change the playback rate of HTML5 video directly on the DOM Element as referenced by the W3C HTML5 Video Wiki Entry.

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.

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…)

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.

Example:

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

});