News

Unleash HTML5 and jQuery to code video rollovers

Inspired by Fueled by Water, the designers at Hello Design reveal the technique behind the video rollovers found on the site

pexels-photo

Inspired by Fueled by Water, the designers at Hello Design reveal the technique behind the video rollovers found on the site

SpeedoFueledByWater

Set it up

The Fueled by Water site features video rollovers for previewing and navigating between the various stories. Over the next few steps we will examine the basic technique behind how this was done. You will need a video clip of at least MP4 format plus a JPG thumbnail image – preferably a descriptive still frame. We’ll add these to an HTML page within a link to capture rollover, along with adding jQuery and some JavaScript functions to toggle the effect.

Include jQuery

We will be utilising jQuery for this technique, so we will need to include the latest library before our main script. In the example we have made here we will use the online jQuery CDN to attach version 1.11.2 to our page, but you can find the latest link by going to jquery.com/download/. In the <head> section of your page insert the following:

001 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>    
002

The HTML markup

When the user moves the mouse inside the thumbail image, we want it to switch to a video. In order to do this, we need to specify the objects inside our <a> tag. Our video object will only have one source, an MP4, but to maximise compatibility you will also want to include both an OGG and a WEBM video file. As you can see preload is set to auto and loop is enabled:

001 HTML:                
002 <a class="over-video" href="#">
003 <img src="thumb.jpg" />
004 <video preload="auto" loop>
005 <source src="loop.mp4" type="video/mp4">                    
006 </video>                  
007 </a>                
008

Add the JavaScript

In the current state our result isn’t looking as pretty as it should. Let’s next add some JavaScript code to manage when to show the still image and when to show the looping video. You’ll have to add this chunk of code in a <script> brace after our jQuery include or just before your closing </body> tag. The code is now ready to be tested within a browser.

001 JAVASCRIPT:                
002 function toggleVideo($elm, show){
003 var $img = $elm.find("img");
004 var $video = $elm.find("video");
005 var video = $elm.find("video")[0];    
006 if (show)                
007 @media (min-width: $mq-med) {    
008 {    
009 video.play();            
010 $img.hide();            
011 $video.show();    
012 }
013 else
014 {                    
015 $img.show();            
016 $video.hide();            
017 video.pause();    
018 }                    
019 }                    
020 $(function () {    
021 $(".over-video").each(function () {    
022 toggleVideo($(this), false);    
023 $(this).hover(function () {        
024 toggleVideo($(this), true);        
025 }, function () {    
026 toggleVideo($(this), false);    
027 });                    
028 });    
029 });

Finishing touches

If your video loop has an audio track, like our example does, you will want to mute it. Achieve this by setting the volume property to zero just after you call the play() method. Another thing to consider is setting the video to the initial position before showing by setting the currentTime property to zero. Our final toggleVideo() function would look like this:

001 function toggleVideo($elm, show)     
002 {                     
003 var $img = $elm.find("img");     
004 var $video = $elm.find("video");    
005 var video = $elm.find("video")[0];     
006 if (show) {                
007 video.currentTime = 0;        
008 video.play();            
009 video.volume = 0;            
010 $img.hide();             
011 $video.show();             
012 }                     
013 else                
014 {                     
015 $img.show();          
016 $video.hide();            
017 video.pause();            
018 }                    
019 }

Moving forward
This brings us to the the final full code for our tutorial, which can be found on FileSilo. It’s only really a starting point, so you can do more such as having an alpha transition effect instead of a hide/show static transition. Additionally, if you have too many of these on your page you may consider creating the <video> markup on the fly. This is because some browsers can’t handle too many video elements at the same time.

×