Popular women's apparel and accessory brand Roxy has introduced a great hover-to-play product video feature to its well designed website.
The feature transforms what appear to be product images into product videos when a shopper hovers, providing an effective form of interaction and product demonstration that will almost certainly help the company boost conversions.
To achieve this effect, the Roxy team is using Adobe Flash, which is a good choice; however, as more modern browsers support HTML5 video, it may make sense to use a non-proprietary technique and open-source file types. In this brief tutorial, I will describe how to create an effect similar to the Roxy product image/video with just a few lines of code.
Big Buck Bunny
For my example, I am going to use the Big Buck Bunny movie as my video. The video is available under a Creative Commons license, which allows me to use it for this tutorial, and it is available in .ogv format, which is a free, open-source video file container format.
HTML Markup
Here is the HTML5 markup I used in my example.
<!doctype html> <html lang="en"> <head> <title>Hover to Play Video with HTML5, CSS, and JavaScripthttp://www.roxy.com/home/index.jsp</title> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <h1>Hover to Play Video Example</h1> <div id="wrapper"> <video id="video-example" width="854" height="480" poster="cover.png" loop> <source src="big_buck_bunny_480p_stereo.ogg.ogv" type="video/ogg"></source> </video> </div><!--end wrapper--> <script src="js.js"></script> </body> </html>
Notice that I have not included the "controls" attribute in my video tag. The HTML5 controls attribute adds normal video controls like play and pause buttons, but since I am mimicking the product-images-to-video effect from the Roxy site, I don't want controls.
A Very Short Style Sheet
Next, I add a very short style sheet just to center the example video and give me something other than a white screen to look at.
body {margin: 0; padding: 0; background: #262626; font-family: Segoe UI; color: #505050; text-align: center; text-transform: uppercase;}
img {border: none;}
#wrapper {margin: 50px auto; padding: 10px; width: 854px; height: 480px; background: #000; border:#303030 solid 1px;}
Use JavaScript to Activate the Script
The JavaScript for this project is so simple that I am almost embarrassed by it. First, I added an event listener, using the World Wide Web Consortium (W3C) standard event listener, which ignores Microsoft's Internet Explorer (IE) browser because it does not yet support HTML5 video implementations—but more on that later.
document.addEventListener('mouseover',hoverVideo,false);
With my event listener in place, I wrote a short function to play the video when a user hovers over the video.
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('video-example');
function hoverVideo(e)
{
if(e.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
Now when a user points the mouse at the video, it plays. Notice that I also added an event listener using this to represent the video element. This is another W3C standard that IE would not have recognized. The event listener initiates hideVideo(), which will pause the video when the mouse pointer goes elsewhere, matching the effect from the Roxy website.
function hideVideo(e)
{
if(e.target == vid)
{
vid.pause();
}
}
That is it. I now have a video that behaves like the product image videos on Roxy.com.
Browser Compatibility
This solution will work in Mozilla Firefox and Google Chrome without an issue. Apple's Safari doesn't recognize OGG video, so I will need to fallback to mp4, so that supporting Safari would require me to save my video in two formats and add the following line of HTML video tag.
<video id="video-example" width="854" height="480" poster="cover.png" loop> <source src="big_buck_bunny_480p_stereo.ogg.ogv" type="video/ogg"></source> <source src="big_buck_bunny_480p_stereo.mp4" type="video/mp4"></source> </video>
Summing Up
Adding a product image-to-video effect is a breeze with HTML5 and JavaScript, but browser compatibility is still an issue, particularly for IE. This could be changing. Microsoft seems to have indicated on its IEBlog that IE9 will support at least MP4 HTML videos, but the IE9 Preview Browser did not work with my example.
