將vimeo風格菜單添加到video.js？

Question

我有一個簡單的演示頁面video.js工作，並沒有改變它的東西呢。我想這樣，我可以將它懸停在上面，看到一個菜單出現，就像vimeo與他們的菜單共享等方式。

我想解決如果這應該在html/css的一面，或者如果video.js本身具有funcationality來添加菜單。一個簡單的例子會很棒，如果有一個在線的地方我可以鏈接到。

在此先感謝

Answer 1

的一種方法是使用video.jsready事件來修改DOM。

如果您檢查DOM，當您的video.js實例觸發ready事件時，您會注意到您的視頻標記已被包裝爲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秒的過渡（如果你想完美匹配）。