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元素（控制栏）

1 个答案: