video.js - 将标题覆盖添加到 Video.js 播放器

Question

我是 Video.js 的新手，但我喜欢我目前所看到的。我没有看到的一件事:如何在播放器顶部添加标题，该标题将在播放时消失，并在暂停时重新出现。

我可以看到如何将 Action 与这些事件联系起来，并且我已经阅读了有关向播放器添加元素的信息。例如(这个例子只完成了一半):

var myContainer = videoObj.addChild('button');
myContainer.addClass("myContainer");

我来自:https://github.com/videojs/video.js/blob/master/docs/api/vjs.Component.md

该片段添加了以下代码:

<div class="vjs-control  myContainer" role="button" aria-live="polite" tabindex="0" style="display: block;">
<div class="vjs-control-content">
<span class="vjs-control-text">Need Text</span>
</div>
</div>

但我想要的是一个带有标题的简单 DIV，代码如下:

<div class="myOverlay">
<h2>Title of Video</h2>
</div>

我在这里叫错树了吗？有没有更好的方法来完成我想做的事情？

提前致谢，比尔

Answer 1

你试过这个videojs插件吗？

https://github.com/brightcove/videojs-overlay

您可以选择在视频开始、播放或结束等特定事件上显示叠加层。

player = videojs('/path/to/video', options, function() {});
overlay_content = '<div class="myOverlay"><h2>Title of Video</h2></div>';
player.overlay({
  overlays: [{
    start: 'loadstart',
    content: overlay_content,
    end: 'playing',
    align: 'top'
  }, {
    start: 'pause',
    content: overlay_content,
    end: 'playing',
    align: 'top'
  }]
});