Question

我有一个使用video.js的简单演示页面，但还没有改变它。我想拥有它，以便我可以将鼠标悬停在它上面，看到一个菜单出现，就像vimeo用他们的菜单分享等一样。

我想弄清楚是否应该在html / css方面进行，或者如果video.js本身有添加菜单的功能。如果有一个我可以链接的在线网站，那么一个简单的例子会很棒。

提前致谢

Answer 1

一种方法是使用video.js ready事件来修改DOM。

如果您在video.js实例触发就绪事件时检查DOM，您会发现您的视频代码已被div包裹，并且您使用的id已被转移到那个div。

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

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

所以，一个快速的例子看起来像这样（使用jQuery，虽然没有它可以完成）：

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

使用CSS，您可以将控件放在右上角（如Vimeo）。 Video.js为包装元素添加了一个类，可用于显示/隐藏控件。默认情况下，隐藏您的元素（display，visibility，opacity等）。当实例的类更改为.vjs-user-active时，您可以显示元素。 Video.js使用1秒转换（如果你想完美匹配）。

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

1 个答案: