rob blog.

Just another WordPress weblog

Tutorial: Serving HTML5 Video Cross Browser (including iPad)

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.

Isn’t H.264 Video Supposed to Save the Internet?

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.

HTML5 Video Ain’t the Same In Every Browser

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.

Getting Your Video Files HTML5 Ready

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.’

1

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.

3

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:

4

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.

<script type="text/javascript">
$(document).ready(function() {
//if browser is firefox, remove the webkit div
// then put firefox video in the firefox div
if($.browser.mozilla){
  $('#webkit_movie_wrapper').remove();
  $('#firefox_movie_wrapper').append("<video width='480' height='360' controls='controls' src='your_video.ogv' poster='your_pic.jpg'>");
}  

//grab version of browser visiting in the page
//just grab it's version number,
//cause we're looking for ie9
var ieVersion = $.browser.version;

//if browser is IE and less than IE9
//that means it is incompatible with
//html5 video
//if so remove the webkit & ff movies
if ($.browser.msie && ieVersion < 9 ) {
    $('#webkit_movie_wrapper').remove();
    $('#firefox_movie_wrapper').remove();
}

//otherwise, remove the ie movie

else{
  $('#ie_movie').remove();
}
}); //end doc ready
</script>

Demo

See the Demo

Tags: , , ,

This entry was posted on Sunday, May 16th, 2010 at 5:55 pm and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

21 Responses to “Tutorial: Serving HTML5 Video Cross Browser (including iPad)”

  1. Richard Barnet Says:

    May 17th, 2010 at 6:09 pm

    This tutorial is great, except for that old-school browser sniffing code. How about updating with object detection instead? This is important because IE 8, for example, will play HTML5 video with the Google Frame plug-in. (But with your example code, you wouldn’t allow it to.)

  2. Tweets that mention Tutorial: Serving HTML5 Video Cross Browser (including iPad) -- Topsy.com Says:

    May 17th, 2010 at 6:26 pm

    [...] This post was mentioned on Twitter by Michelle Conlon, Cody Swann. Cody Swann said: Tutorial: Serving HTML5 Video Cross Browser (including iPad) http://bit.ly/dpNpy2 [...]

  3. Rob Walsh Says:

    May 17th, 2010 at 7:08 pm

    Thanks, Richard for turning me on to the Google Frame plugin - I hadn’t heard of it. I don’t know if we can expect users to have plugins like that already installed in their browsers. If the application makes users install the Frame plugin from the get go, then sure - but I don’t think we can expect that for random pages on the internet right now.

  4. Serving HTML5 Video Cross Browser (including iPad) | RefreshTheNet Says:

    May 17th, 2010 at 10:33 pm

    [...] Tuto­r­ial: Serv­ing HTML5 Video Cross Browser (includ­ing iPad) [...]

  5. Deluxe Blog Tips Says:

    May 18th, 2010 at 1:05 am

    Nice tutorial. Using HTML5 video I think is still expensive for web developers. Your solution is good, but it requires high version of web browsers. I prefer using a video player and flash support for that now. But in the future, I hope we can use HTML5 video comfortably.

  6. Zoz Says:

    May 20th, 2010 at 9:51 am

    Great tutorial, I’m confused about the IE solution, I’m on a PC here with IE8 and it’s asking for the Quicktime plugin. By doing this aren’t we simply substituted one plugin “Flash” for another plugin “Quicktime” In an ideal world shouldn’t the video work on IE without any plugin installed?

  7. Rob Walsh Says:

    May 20th, 2010 at 12:28 pm

    Thanks Zoz,

    Regarding the IE solution:

    Since IE doesn’t support HTML5 video, you can make the fallback whatever you want. You can make it flash or whatever - I only used a quicktime file because I didn’t feel like encoding the video into yet another format.

    Keep in mind, even if the IE default is flash, you’re still relying on a plugin. And since IE doesn’t play HTML5 video, we’re stuck with plugins.

  8. Eric Says:

    May 21st, 2010 at 3:15 am

    IE9 will be supporting HTML5 video tag natively, so no plugin is needed.

  9. Rob Walsh Says:

    May 23rd, 2010 at 8:41 am

    Yeah, if you look at the IE conditional, it’s only concerned with IE versions less than 9 - so that’s taken care of.

  10. John Smith Says:

    August 9th, 2010 at 2:54 am

    Thank you so much Rob! I completely understand your concepts :p
    …You gotz teh leetzors Ϟkill.
    I am working on a project that has a html, mobile and flash versions. One of the clients’ request is to view the html version on the iPad. But - since the HTML version is already developed to only display for all non-flash supporting browsers/users(that are too lazy or slow to dl the stupid flash plugin…or tounge-stuck to steve job’s balls), it links .wmv files! I decided to use this version to display iPad-specific video content and using your technique was the perfect solution. Big props, man.

    I’m actually surprisingly happy that FF h264 content was not in the requirements since encoding it is apparently an extra step. Thanks a ton for doing the research on that, I know I’ll be using it in the future.
    Firefox is my baby, we are very close ;)

    Thanks again,

    -John Smith

  11. chris Says:

    August 11th, 2010 at 10:19 am

    i dont know why but if i load the demo website with the ipad the whole safari browser crashes…

  12. marten Says:

    August 18th, 2010 at 12:36 am

    Hi Rob,

    If you want complete control over the look&feel of the player, flash seems a good solution. Good for you to know that the (de facto standard) JW Player, or at least as of version 5, supports h264 encoded quicktime movies.

    Cheers!

    ———
    you wrote: Since IE doesn’t support HTML5 video, you can make the fallback whatever you want. You can make it flash or whatever - I only used a quicktime file because I didn’t feel like encoding the video into yet another format.

  13. Rob Walsh Says:

    September 21st, 2010 at 10:48 am

    @chris,

    It looks like the the iPad’s version of Safari was crashing because of an issue with iPads and Typekit as described here. I removed the Typekit classes and retested and it works fine now.

    Thanks!

  14. David Bootle Says:

    September 30th, 2010 at 10:42 pm

    Great tutorial Rob… thanks very much for the walkthrough. Unfortunately my iPad is crashing despite the fact that you’ve removed the Typekit fonts. Does it definitely work on yours? I hope it’s not just me :(

  15. Rob Walsh Says:

    October 1st, 2010 at 6:48 am

    @david,

    I just retested and it’s working fine for me. maybe try clearing your cache?

  16. Eric Says:

    November 11th, 2010 at 1:16 am

    this is a very useful write-up. how do you retain the QT export’s ability to serve different versions for iPhone vs Computer?

  17. Eric Says:

    November 11th, 2010 at 2:36 am

    Also it is useful to know the quality default of ffmpeg2theora is 6 out of 10 which will produce a much worse looking video than the m4v outputted by QT. you can add “-v 8″ or “-v 9″ to bring it close.

    And I found this helpful for enabling autoplay on iPhones and iPads - http://www.codeblog.co/getting-autoplay-working-on-ios/

  18. Tom Says:

    November 22nd, 2010 at 8:33 am

    Wow, can’t wait to try this later. For the life of me I couldn’t figure out why the HTML5 was working in Safari and Firefox but not on the iPad and I have to guess now that it’s because I have the two source tags one right after another.

    I’m afraid HTML5 just isn’t ready for prime time yet considering all these hoops us developers have to go through to get it to work.

    Kind of like the “old days” when you had to code exceptions for IE6 which I mercifully ditched for good last year.

  19. Shawn Says:

    January 4th, 2011 at 11:00 am

    Hello,.. Wonderful tutorial (of course)…

    If you think of doing a followup, can you suggest how mix this solution without a pop-up window for the video (like here: http://videolightbox.com/ ).

    I’m trying to come up with a similar look, but for locally served .mov files. Ideally, the popup window would be client-size sensitive so that smaller screens get smaller versions… but I’ll go with whatever works!

    thanks.
    /shawn

  20. Alex K Says:

    January 11th, 2011 at 4:55 pm

    Looks like Chrome will only be supporting Theora…

    http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html

  21. Jscss3 Says:

    January 12th, 2011 at 3:02 am

    Quite good tutorial. But you’re missing Opera browser, that does not support h.264. Your demo trys to display h.264 in Opera.