Just another WordPress weblog
Is HTML5 video ready for prime time? I can’t give a definite answer to that question — but I can say that getting it to work cross browser, and that includes the iPad can be annoying.
That’s what I thought. With the whole Jobs vs Adobe thing, it seems like HTML5 video makes angels sing and raises the dead. On a recent project I’ve had to use HTML5 video to serve video to web browsers and mobile devices like the iPad — and I was shocked at how cumbersome it is to implement.
So H.264 encoded video works brilliantly in webkit browsers. Note that I said, webkit browsers. NOT FIREFOX. Apparently, Firefox needs Theora .ogv files to serve HTML5 video. So before I go through the code to implement this, let’s look at how we encode the videos.
In this tutorial, I will start with a .mov file and encode that into what we need to serve our HTML5 video.
First, we open this file up in quicktime (I’m using the version that comes with Snow Leopard) and select ’save for web.’
Then, save an H.264 encoded copy. This folder will save a few files for you in it’s own folder: An your .m4v encoded movie for webkit browsers, a poster frame .jpg file, a .mov reference file, and an html page.
Now we need a Theora encoded .ogv file for Firefox. Luckily there is a command-line based tool that can transcode our m4v file into .ogv for us. It’s located here: FFMPEG2THEORA
Once you have that installed, open up terminal and change directories to where your .m4v file is stored. Then enter the following command:
ffmpeg2theora *name of your video (without the asterisks)*.m4v
It will encode your video into the same directory as your .m4v file. Your terminal output should look something like this:
So let’s start writing our markup. One thing we can do is go ahead and put in our HTML5 markup and include our videos
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <video poster='your_pic.jpg' controls=""> <source width='480' height='360' src='your_movie.ogv' /> <source width='480' height='360' src='your_movie.m4v' /> </video> </body> </html>
With this approach, Webkit should play its .m4v file and Firefox should play its .ogv file.
Two possible issues. First, you may need to put the following in your server’s htaccess file before FF will play HTML video.
AddType video/ogg .ogv AddType audio/ogg .oga AddType video/mp4 .mp4
Another problem, is that iPad will choke if both videos are present, as outlined above. And we haven’t even put in a file for IE to play, so let’s do that now.
First, we want to put our webkit compatible video in the DOM by default — that way the iPad will be able to play it along with the other webkit browsers. We’ll leave an empty div to put our video in and insert a FF compatible video if FF is the browser visiting the page, and finally put in an IE conditional so that a non HTML5 video is loaded for IE browsers less than version 9.
<div id="movie"> <div id="webkit_movie_wrapper"> <video width="480" height="360" controls="controls" src="your_video.m4v"></video> </div><!-- end webkit_movie_wrapper --> <div id="firefox_movie_wrapper"></div><!-- end firefox_movie_wrapper --> <div id="ie_movie_wrapper"> <!--[if lt IE 9]> <object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' standby="data is loading..." codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='480' height='376'> <param name='src' value='your_video.mov'> <param name='autoplay' value='true'> <param name='type' value='video/quicktime' width='480' height='376'> <param name='controller' value='true'> <embed src='your_video.mov' width='480' height='376'autoplay='true' controller='true' type='video/quicktime' pluginspage='http://www.apple.com/quicktime/download/'> </object> <![endif]--> </div><!-- end ie_movie_wrapper --> </div><!-- end movie -->
So now we have our html markup, let’s get some jQuery involved so that we can replace the webkit movie with the Firefox one when Firefox visits the site.