在外部div(controlbar)中创建video.js DOM元素

Question

如何在外部div框中创建video.js DOM元素(例如volumebar(？

在API中，有一个关于如何创建组件的DOM元素的简短描述：https://docs.videojs.com/docs/api/volume-bar.html定义于https://github.com/videojs/video.js/blob/master/src/js/control-bar/volume-control/volume-bar.js行号：27

但我不明白如何使用它在独立于主视频的div框中创建自己的DOM元素。

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

Answer 1

不能使用player.addChild方法，因为它会创建通用播放器的组件树。相反，您必须自己初始化组件：

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>