Add vimeo style menu to video.js? - html

Question

I have a simple demo page working with video.js and haven't changed a thing with it yet. I would like to have it so that I can hover over it and see a menu appear, much like the way vimeo does with their menu for sharing etc.
I am trying to work out if this should be done on the html / css side of things, or if there is funcationality in video.js itself to add menus. A quick example would be great if there is one online somewhere that I can be linked to.
Thanks in advance

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