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

将标题叠加添加到Video.js播放器

1 个答案: