So far, we've concentrated on how to use the HTML5 video tags—this works well in current browsers, but what about older ones? In this age of responsive design, visitors to a website will be using any one of a number of different platforms to view content, and it is not necessarily going to be the same platform from one day to the next. To get around this, we have to provide some form of fall-back support, which will be the subject of our next task.
For this task, you will need to download a copy of mediaElement.js, which is available from http://www.mediaelementjs.com. You will also need copies of your videos; you can reuse the ones created earlier, as long as you have copies in WebM, MP4, and Ogg format. The download contains a number of files, of which you only need a few—you need to extract copies of the following files into a separate folder that we will call mediaelement demo:
mediaelement-and-player.jsandjquery.js– store in a folder calledjsflashmediaelement.swf– store in a folder calledmedia; put your video files in the same foldermediaelementplayer.css,background.png,bigplay.png,controls.png– store in the top levelmediaelementdemofolder
Let's begin with the basic framework, so open up your text editor, and save the following lines into a file named
mediaelementdemo.js:<!DOCType html> <html> <head> <code> <script src="js/jquery.js"></script> <script src="js/mediaelement-and-player.min.js"> </script> <link rel="stylesheet" href="mediaelementplayer.css" /> </code> </head> <body> </body> </html>Let's go ahead and add in the video links, beginning with the HTML5 video tag as shown in the following code snippet:
<video width="700" height="400" controls="controls poster="media/trailer_480p.jpg" " preload="none"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="media/trailer_480p.mp4" /> <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="media/trailer_480p.webm" /> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="media/trailer_480p.ogv" /> <!-- Flash fallback for non-HTML5 browsers without JavaScript -->The second part of this is the fall-back video code—add in the following code snippet immediately below the first one:
<object width="320" height="240" type="application/x- shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&file=media/trailer_480p.mp4" /> <!-- Image as a last resort --> <img src="media/trailer_480p.jpg" width="320" height="240" title="No video playback capabilities" /> </object>
The last step is to add in the script call to
.mediaelementplayer():</video> <script> $('video').mediaelementplayer(); </script>If all is well, you will end up with something similar to the following screenshot:
The observant amongst you will have noticed something—you would be correct in thinking that the preceding code snippet is very similar to the one we used in one of our earlier recipes. If this is the case, then what's the reason for including it here?
The answer to this forms the key reason for this task: MediaElement.js acts as a polyfill, to provide a form of compatibility with older browsers, while still using the
<video> tags. It works by not trying to retrofit backward compatibility to a HTML5 video player, but instead providing forward compatibility and consistency; it starts with a baseline of using the MP4 format in the standard <object> tags, but switching this to the <video> tag if it can detect that the browser being used is able to use this tag.
One of the drawbacks of the <video> tags at present is the need to provide fall-back support for older browsers, at least for the next few years. The problem with this is that while development of the tags is still in something of a state of flux, there is no standard fall-back method to use. It's for this reason that people have provided their own polyfills. Some notable examples you can try include Modernizr (http://www.modernizr.com) or html5shiv (http://code.google.com/p/html5shiv/).