Using HTML5 Video

In order to deliver video to all devices (Desktop, mobile, tablet), that is not served from a 3rd party like Youtube or Vimeo, we need to use the HTML5 <video>  element.

The trouble is, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. In order to deliver video to Firefox 4+, Safari4+, Chome11+ and IE9+, we need 2 video formats (.mp4 and .ogg) and 2 video players (HTML5 and Flash).

.mp4

This makes Safari/Chrome happy (iOS devices as well). Make sure it’s encoded using H.246, which is the important part.

.ogg

This makes Firefox Happy, but only if the file is served by the server with the “video/ogg” mime type, which is not usually a part of the standard configuration. Add the mime type to .htaccess for this.

Video Players (HTML5 Video, Flash)

Not all browsers support HTML 5 video, of course. To compensate, I use “Flowplayer“, a fallback Flash version, that uses the .mp4 encoded file. The Flash player is used for all browsers that don’t recognize the <video> element.

The final problem is that we can’t just use .mp4 for the iOS devices and fall back to Flash for Firefox, because Firefox understands the video element, looks for a src it can read and just sits if it doesn’t find one. It won’t use the fallback.

Solution

  1. Make one version that uses Theora video and Vorbis audio in an Ogg container.
  2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container. (This version will also work in the Flash Player for IE and older browsers.)

Create the .ogg version

  1. Use ffmpeg2theora (it’s a command line encoder) to convert the video.
  2. My command was as follows:
    ffmpeg2theora -v 7 --soft-target -V 2500 -x 1024 -y 432 -a 5 /Users/ben/Trailer.mov
    (Just type ffmpeg2theora at the command line for help with the params)

Create the .mp4 version

  1. Use Handbrake with the “Apple > Universal” preset. The iPad has certain limitations about what type of video settings should be used. See also this article at stackoverflow.
  2. Change the extension .mp4 (It’s exactly the same internals as .m4v, but for some reason it’s the standard extension) More here.
  3. Check the “Web optimized” checkbox under “Output Settings” just below.
  4. Process the video.

HTML

I’m using Video for Everybody and videojs to format the HTML5 player with a Flash (Flowplayer) fallback.

5 Comments

  1. Kylia on January 1, 2012 at 2:31 pm

    Learning a ton from these neat articles.

  2. Luis on September 2, 2014 at 8:33 pm

    I read a lot of interesting articles here. Probably you spend a lot of time writing, i know how to save
    you a lot of time, there is an online tool that creates high
    quality, SEO friendly posts in minutes, just type in google – laranitas free content

  3. history of baseball timeline on October 4, 2014 at 10:19 am

    The days of peeling your vegetables with a knife
    have been over since we have been blessed with the peeler.
    Nevertheless, having correctly coated chocolate anytime you want doesn’t mean that you can indulge
    in them indiscriminately. Regardless how big or small the occasion is, you always make
    sure that you furnish guest with sumptuous food and
    delicacies to please them.

  4. Slotenmaker Rotterdam Spoed on October 23, 2014 at 4:43 am

    Hi there to every one,because I am in fact eager of reading this webpage’s post to be updated on a regular basis.
    It consists of pleasant information.

  5. fd on February 5, 2016 at 5:06 am

    Processing time.

Leave a Comment