向Video.js播放器添加标题叠加

Question

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

我可以看到如何将动作与这些事件相关联，并且已经阅读了有关向播放器添加元素的信息。例如（此示例仅完成一半）：

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'
  }]
});