html5 - Add vimeo style menu to video.js? -


i have simple demo page working video.js , haven't changed thing yet. have can hover on , see menu appear, way vimeo menu sharing etc.

i trying work out if should done on html / css side of things, or if there funcationality in video.js add menus. quick example great if there 1 online somewhere can linked to.

thanks in advance

one way use video.js ready event modify dom.

if inspect dom when ready event fires video.js instance, you'll notice video tag has been wrapped div, , id used has been transferred div.

if have enabled controls, you'll notice video element has sibling elements in new wrapper div. these controls video.js adds.

you can create additional controls, , add siblings video element (alongside ones video.js creates).

so, quick example (using jquery, although 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 dom     var playerwrapper = $("#" + videoid);     playerwrapper.append(videomenu); });

using css, can position controls in top right (like vimeo). video.js adds class wrapper element can use show / hide controls. default, hide elements (display, visibility, opacity, etc.). when class of instance changes .vjs-user-active, can show elements. video.js uses 1 second transition (if want match perfectly).


Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre
Read more

html - Repeat image to extend header to fill screen -

i have header (2300x328px) , image (456x328px). want second image extend header left , right, header fills whole width availiable.it needs connect without overlapping, because there pattern. here image of mean: http://imgur.com/0ji3hae circles pattern (why should not overlap) , images extend header can repeated infinitely. for pattern align need align background pattern according header image (ex. center, left etc) , make sure pattern starts @ right place. i made fiddle explain mean - http://jsfiddle.net/taneleero/g99xa/ .header { background:url(http://i.imgur.com/bzvtzl4.jpg) repeat-x center; } .header img { display:block; margin:0px auto; }
Read more

javascript - Backbone.js getting target attribute -

i trying figure out why value of e.target.getattribute('data-text') becoming null when go html backbone js file. html: <script type="text/template" id="lesson-template"> <span id="lesson-title"><%= tracks[0].title %></span> <select class="sel"> <% _.each(tracks, function(track) { %> <option value = "<%= track.text %>" data-text="<%= track.title %>"><%= track.title %></option> <% }); %> </select> <p id="tracktext"><%= tracks[0].text %></p> </script> js: window.librarylessonview = lessonview.extend({ events: { "change .sel " : "changetext" }, changetext: function(e) { alert(e.target.getattribute('data-text')); //i getting null value here! document.getelementbyid("lesson-title").innerhtml= e.target.getattribute('data-text&
Read more