Created
April 15, 2011 08:54
-
-
Save rymai/921421 to your computer and use it in GitHub Desktop.
SublimeVideo: Video "On Demand" (snippet)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Inside the <head> tag --> | |
| <script type="text/javascript" src="http://cdn.sublimevideo.net/js/YOUR_TOKEN.js"></script> | |
| <!-- Inside the <body> tag --> | |
| <img class="needs_sublime" src="video1.jpg" width="640" height="360" /> | |
| <!-- Just before </body> (or in the <head> tag) --> | |
| <script type="text/javascript"> | |
| sublimevideo.load(); // When this page is first loaded there are no <video> element on the page, so SublimeVideo is not loaded unless we load it manually with this method | |
| // see: http://docs.sublimevideo.net/javascript-api#load | |
| sublimevideo.ready(function(){ // see: http://docs.sublimevideo.net/javascript-api#ready | |
| $("img.needs_sublime").each(function(index, imgEl){ | |
| $(imgEl).bind("mousedown", function(event){ // IMPORTANT to do this onmousedown (and not onclick!) | |
| event.preventDefault(); | |
| createVideoElementAndPrepareAndPlaySublimeVideo(imgEl); | |
| }); | |
| }); | |
| }); | |
| function createVideoElementAndPrepareAndPlaySublimeVideo(imgEl) { | |
| var pathToPoster = imgEl.src; // we get your MP4 video path from the href attribute of the <a> element | |
| var pathToVideo = pathToPoster.replace(/thumbs\/(\w+).jpg/, "/videos/$1") | |
| // Create the <video> element | |
| var video = $('<video>').attr({ | |
| style: 'display:none', | |
| width: imgEl.width, | |
| height: imgEl.height, | |
| poster: pathToPoster, | |
| preload: 'none' | |
| }); | |
| // Create the <source>s element and append them to the <video> element | |
| // You will need to have well-named posterframe and video files | |
| $('<source/>', { src:pathToVideo+".mp4" }).appendTo(video); | |
| $('<source/>', { src:pathToVideo+"-mobile.mp4" }).appendTo(video); | |
| $('<source/>', { src:pathToVideo+".ogv" }).appendTo(video); | |
| // Insert <video> element after the <a> element | |
| $(imgEl).hide(); | |
| $(imgEl).after(video); | |
| // SublimeVideo prepare | |
| $(imgEl).addClass('sublime').removeClass('needs_sublime'); | |
| sublimevideo.prepareAndPlay(video[0]); // see: http://docs.sublimevideo.net/javascript-api#prepareAndPlay | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment