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

Question

我有一个使用 video.js 的简单演示页面，但尚未对其进行任何更改。我想拥有它，这样我就可以将鼠标悬停在它上面并看到一个菜单出现，就像 vimeo 使用他们的菜单进行共享等一样。

我正在尝试确定这是否应该在 html / css 方面完成，或者 video.js 本身是否具有添加菜单的功能。如果有一个在线的地方可以链接到我，那么一个简单的例子会很棒。

提前致谢

Answer 1

One way would be to use the video.js ready event to modify the DOM.

If you inspect the DOM when the ready event fires from your video.js instance, you'll notice that your video tag has been wrapped with a div, and the id you used has been transferred to that div.

If you have enabled controls, you'll notice that the video element also has sibling elements in your new wrapper div. These are the controls video.js adds.

You can create additional controls, and add those as siblings to the video element (alongside the ones video.js creates).

So, a quick example would look like this (using jQuery, although this could be done without it):

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

Using CSS, you can position the controls in the top right (like Vimeo). Video.js adds a class to the wrapper element that you can use to show / hide your controls. By default, hide your elements (display, visibility, opacity, etc.). When the class of the instance changes to .vjs-user-active, you can show your elements. Video.js uses a 1 second transition (if you want to match it perfectly).