So far, we've concentrated on developing our basic video player, using jQuery. It's time now to change track, and take a look at another useful feature that you can use with HTML5 videos—overlays. This can help to give emphasis to displaying a video, as you can provide a mask to cover elements in the background, thereby removing some of the distraction.
For this task, you need to avail yourself of a copy of the shareware application VideoLightbox—at the time of writing, the latest version is 2.1, which is available from http://www.videolightbox.com. It is free for non-commercial use, so if you need to use it commercially, you will need to purchase a license that is $49 at the time of writing. You will also need a copy of a video in MP4 format—one of the ones you've converted, or used, from earlier will do fine.
- Double-click on the videolightbox-setup.zip file, and run the
videolightbox-setup.exefile, accepting all of the defaults. - Once in VideoLightbox, click on Videos, then Add video from file—select your file, then click on Open. You will see your video listed, as shown in the following screenshot:
- Click on the Customize thumbnails tab, and select your options—for the purposes of this demo, I've chosen Polaroid as the Template format, followed by PNG - Portable Network Graphics for the Thumbnail format and the Play button, as shown in the following screenshot:
- On the next tab, Customize video, you can select from a number of options, including overlay template, resolution of video, and background color. For the purposes of this task, we will leave the defaults of Standard template, and a resolution of 640x480, unchanged.
- Click on the Publish tab, then on the Publish button—this will by default publish the video and code to a folder called
VideoLightBoxin yourDocumentsfolder. VideoLightbox will generate the code for you, and display the results in your default browser:
- We can then edit a copy of the source, and adapt it to our needs—here's a simplified example:
<!DOCTYPE html> <html> <head> <title>VideoLightBox Test</title> <link type="text/css"rel="stylesheet" href="index_videolb/videolightbox.css" /> <link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/> <script src="http://cdn.jquerytools.org/1.2.7/full/ jquery.tools.min.js"></script> <script src="index_videolb/swfobject.js" type="text/javascript"></script> </head> <body bgcolor="#f0f0f0"> <div class="videogallery"> <a class="voverlay" href="index_videolb/player.swf?url=video/bbb400p.mp4&volume=10 0" title="bbb400p"> <img src="index_videolb/thumbnails/bbb400p.png" alt="bbb400p" /> <span></span> </a> </div> <script src="index_videolb/videolightbox.js" type="text/javascript"></script> </body> </html>
VideoLightbox uses a combination of jQuery Tools (http://www.jquerytools.org) and the SWFObject library (http://code.google.com/p/swfobject/)—the SWFObject acts as a container, into which a base player file is stored, and from within which the MP4 video is played. The jQuery Tools library is used to provide the overlay functionality. A call is made to the player "container" (in this instance player.swf), which stores an instance of our video, and is used to provide the stop/start controls for video playback.
We've taken a look at a number of recipes, to show you how you can embed HTML5 video—using the new <video>
tag—within your pages. This is only just the start of what you can achieve using the new tag—there is a whole world out there to explore. I hope you've enjoyed working through the recipes, just as much as I have enjoyed writing this book!