The iPhone doesn't run Adobe Flash. RSS readers cannot interpret JavaScript. Microsoft's Internet Explorer (IE) does not understand a simple HTML5 <video> tag, and Mozilla Firefox doesn't like MP4s. So deciding which video format or inclusion technique to use in a web project can be something of a challenge.
Video on the Internet has reached a crossroads. There are several techniques for embedding video, none of which work on every platform or with every browser. Perhaps, the best overall solution is to use simple markup—HTML5—with the unencumbered Ogg open standard container format. But at present that optimal solution only works in Firefox and Google's Chrome, and it may well be that other video embedding techniques win the day.
While I am certain there will soon be a convergence of web video technology, for the moment, I need a hack that allows me to offer the best possible solution to those users whose browser and platform support it, without crashing or otherwise hosing-up users that are on iPhones, IE, or using RSS readers. This is even a challenge we are going to face here on Ecommerce Developer. At the moment, we only provide Flash video, which, of course, won't work for any iPhone, iPod, or iPad, and it doesn't show up in some RSS readers. As we optimize our site for mobile browsers, we'll need to address this issue.
”Video for Everybody”
“Video for Everybody” is "a chunk of HTML code" written by Kroc Camen specifically to embed "a video into a website using the HTML5 <video> element, falling back to QuickTime and Flash automatically, without the use of JavaScript or browser-sniffing. It is not a complete solution, but rather a template that smart developers can use to solve their own unique video project challenges.
“Video for Everybody” is, in Kroc's own words, an "ugly kludge" that will certainly be replaced one day with an elegant web-video solution. But for now it is a great way to ensure that site visitors see a video of some sort regardless of platform or browser.
“Video for Everybody” first offers the client HTML5 video in either Ogg or MP4 formats. If the client doesn't understand, it is offered in QuickTime, too. If that fails, Flash is employed. And finally, if Flash fails, it offers a static image with links to download the video.
“Video for Everybody” Code
The aforementioned chunk of HTML—with all of Kroc's helpful comments intact—follows.
<!-- "Video For Everybody" v0.3.2--> <!-- first try HTML5 playback. if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> <video width="640" height="360" poster="__POSTER__.JPG" controls> <!-- you must use `</source>` to avoid a closure bug in Firefox 3 / Camino 2! --> <source src="__VIDEO__.OGV" type="video/ogg"><!-- Firefox native OGG video --></source> <source src="__VIDEO__.MP4" type="video/mp4"><!-- Safari / iPhone video --></source> <!-- IE only QuickTime embed: IE6 is ignored as it does not support `<object>` in `<object>` so we skip QuickTime and go straight to Flash further down. the line break after the `classid` is required due to a bug in IE --> <!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! [endif]--> <!-- non-IE QuickTime embed (hidden from IE): the self-closing comment tag allows non-IE browsers to see the HTML whilst being compatible with serving as XML --> <!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4"> <!--<![endif]--> <param name="src" value="__VIDEO__.MP4" /> <param name="showlogo" value="false" /> <param name="autoplay" value="false" /> <!-- fallback to Flash --> <object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <!-- fallback image. download links are below the video. warning: putting anything more than the fallback image in the fallback may trigger an iPhone OS3+ bug where the video will not play --> <img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__" title="No video playback capabilities, please download the video below" /> </object><!--[if gt IE 6]><!--> </object><!--<![endif]--> </video> <!-- you *must* offer a download link as they may be able to play the file locally. customize this bit all you want --> <p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>
Now, let's take the code piece by piece.
HTML Video
As I mentioned above, “Video for Everybody” first includes HTML5 video markup. The “Video for Everybody” solution sets the video dimensions with older inline HTML width and height attributes. However, I would remove these and use CSS to provide the video player dimensions, which also makes the markup shorter.
It is also noteworthy that Chrome is leading the charge on HTML5 video and can support either Ogg or MP4 formats. When both are offered, as they are in the “Video for Everybody” solution, Chrome plays the format it comes to first. Other browsers like Firefox, Camino, or Safari play they format they recognize.
<video width="640" height="360" poster="__POSTER__.JPG" controls> <source src="__VIDEO__.OGV" type="video/ogg"></source> <source src="__VIDEO__.MP4" type="video/mp4"></source>
QuickTime Video
Next, assuming that the browser did not understand the HTML5, the “Video for Everybody” solution offers QuickTime for newer versions of IE.
The first portion of the code is only interpreted by IE versions greater than IE 6. It is important to note that some developers don't like using the special IE only comments, such as <!--[if gt IE 6]>, as inline code. The other possible solution here would be to use JavaScript to decide which browsers should see which video options. While I have always used JavaScript in these instances, the “Video for Everybody” solution does have the advantage of working even when JavaScript is not enabled.
The second section of code prefaced with the comment for "not IE," <!--[if !IE]><!--> is used to embed QuickTime video in clients like the iPad or the iPhone running Safari.
<!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"> <![endif]--> <!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4"> <!--<![endif]--> <param name="src" value="__VIDEO__.MP4" /> <param name="showlogo" value="false" /> <param name="autoplay" value="false" />
Flash Fallback
The next fallback relies on Flash. When I am adding video in projects, I skip the QuickTime step above and go directly from HTML5 to Flash, but again the “Video for Everybody” solution is more inclusive than I have been in past projects.
This next bit of code provides the Adobe Flash Player video content. Notice that the closing HTML5 video tag is also included with this bit of code.
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <!-- fallback image. download links are below the video. warning: putting anything more than the fallback image in the fallback may trigger an iPhone OS3+ bug where the video will not play --> <img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__" title="No video playback capabilities, please download the video below" /> </object><!--[if gt IE 6]><!--> </object><!--<![endif]--> </video>
Video Download
The final fallback is to a static image with download links.
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>
Summing Up
“Video for Everybody” is an HTML template that seeks to provide the best possible video solution to users regardless of browser or platform. The solution is not perfect, but it should get you thinking about video in the proper way.
