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

Posted 2023-03-07

【中文标题】将标题覆盖添加到 Video.js 播放器

【英文标题】：Adding Title Overlay to Video.js player

【发布时间】：2015-03-05 18:18:48

【问题描述】：

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

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

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

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

那个 sn-p 添加这个代码：

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

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

提前致谢， 比尔

【参考方案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'
  ]
);