Search code examples
javascripthtmldomvideo.jsvolume

Create video.js DOM elements in external div (controlbar)

How can I create video.js DOM elements (for example the volumebar) in an external div box?

In the API there is a short description of how component's DOM elements are created: https://docs.videojs.com/docs/api/volume-bar.html Defined in https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control/volume-bar.js line number: 27

But I don't understand how I can use this to create my own DOM elements in div boxes that are independent from the main videos.

 constructor(player, options) {
    super(player, options);
    this.on('slideractive', this.updateLastVolume_);
    this.on(player, 'volumechange', this.updateARIAAttributes);
    player.ready(() => this.updateARIAAttributes());
  }
Solution

  • You can't use player.addChild method because it creates generic player's component tree. Instead you have to initialize component on your own:

    const VolumeBar = videojs.getComponent('VolumeBar');
var box = document.getElementById('volume-box');
var player = videojs('content_video');
var volumeBar = new VolumeBar(player);
// player calls dispose on children, but this is not a child
player.on('dispose', volumeBar.dispose.bind(volumeBar))
box.appendChild(volumeBar.el());
    <script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>

<video id="content_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
  <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" ></source>
</video>

<div id="volume-box" class="video-js" style="height: auto; overflow: auto;margin-top: 20px;"></div>