在外部 div（控制栏）中创建 video.js DOM 个元素

Question

如何在外部 div 框中创建 video.js DOM 元素（例如音量条）？

在 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>

在外部 div（控制栏）中创建 video.js DOM 个元素

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

html

javascript

dom

volume

video.js