Html 是否将vimeo样式菜单添加到video.js？

我有一个使用video.js的简单演示页面，它还没有改变任何东西。我想有它，这样我就可以悬停在它上面，看到一个菜单出现，就像vimeo做他们的菜单共享等

我正在试图弄清楚这是否应该在html/css方面完成，或者video.js本身是否具有添加菜单的功能。一个快速的例子将是伟大的，如果有一个在线的地方，我可以链接到

---

提前感谢

一种方法是使用

video.js

ready

事件修改DOM

如果在从video.js实例触发ready事件时检查DOM，您会注意到您的视频标记已用

div

包装，并且您使用的

id

已传输到该div

如果启用了控件，您会注意到video元素在新的包装器div中也有兄弟元素。这些是video.js添加的控件

您可以创建其他控件，并将这些控件作为同级添加到视频元素（与video.js创建的控件一起）

因此，一个简单的示例如下所示（使用jQuery，但不使用jQuery也可以）：

var vimeoMenu='
；
var videoId=“示例视频”；
var playerInstance=videojs（videoID）.ready（函数（）{
//向DOM添加元素
var playerRapper=$（“#”+videoId）；
playerRapper.append（视频菜单）；
});

使用CSS，您可以将控件定位在右上角（如Vimeo）。Video.js向包装器元素添加一个类，您可以使用该类来显示/隐藏控件。默认情况下，隐藏元素（

显示

，

可见性

，

不透明度

等）。当实例的类更改为

.vjs user active

时，可以显示元素。Video.js使用1秒的转换（如果您想完美匹配的话）

var vimeoMenu = '<ul id="vimeo"><li id="like"></li><li id="later"></li><li id="share"></li></ul>';

var videoId = "example_video";    
var playerInstance = videojs(videoID).ready(function(){

    // Add elements to DOM
    var playerWrapper = $("#" + videoId);
    playerWrapper.append(videoMenu);
});