Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

Pocket guide to HTML5 and Video

There’s currently a lot of hype on the web regarding HTML 5 and its relationship with open (or not) standards video. Ogg, Theora, WebM, Vorbis, VP8. All these new terms are part of these new world of possibilities brought by HTML 5 and the inclusion of the video tag. In this guide we will explore how to encode a video in a format suitable for HTML 5 delivery, how to insert this video in our web page and review some slick video players.

The <video> tag

In its most basic form, video support on HTML 5 specification is merely a tag: <video>, and this video tag supports a series of specific attributes:

  • autoplay
  • controls
  • height
  • loop
  • preload
  • src
  • width

Of course, it also supports standard HTML attributes like class, id, title, etc, and standard HTML 5 sttributes like draggable or hidden. The <video> tag is supported by the following browsers (and the corresponding version):

  • Chrome 3
  • Firefox 3.5
  • Opera 10.54
  • Safari 3
  • IE9 (coming up)

Yeah, that’s right. No native video support for IE 8. However, if you add the Google Chrome Frame for IE you can still get support for HTML 5 video in IE.

How do we use the video tag? The easiest way to add a video to your page is

<video src="video.ogg">
   Some text for old browsers that don't support HTML 5 video
</video>

Playback controls

Of course, you might want to offer your visitor some controls to pause the video for example. Just add

<video src="video.ogg" controls>
   Some text for old browsers that don't support HTML 5 video
</video>

and your browser will add the neccesary controls for video playback. The attribute controls can take no parameters, but you can write something like controls=”controls” or controls=”true” if you want. Now your video has controls but… maybe not the best looking. Moreover, controls look & feel varies from browser to browser as you can see in the following image:

In case you want to build your own controls to create a better looking player or blend it seamlessly with the overall interface you designed or just to bring a visual consistency across browsers, you need to write your controls using some JavaScript. Steve Heffernan wrote a detailed tutorial about how to create a stylish video player with adding fullscreen capabilities. Ok, it’s actually “full window” since HTML5 lives within the player and unlike Flash, which maximized beyond the browser screen, HTML5 is confined to the browser window.

HTML5 Video players

Of course, there are already some players that offer you a slick looking skin with more advanced controls than the ones offered by the default browser player.

Open Standard Media (OSM) Player

The OSM Player is an incredible player built using jQuery, open source and free. It features playlist support (which you can hide), full window mode, and you can get the link for the video or the embed code among other options. Works on all browsers (all as in HTML5, that is, Chrome, Firefox, Safari and Opera).

Kaltura video player

One of the hot features of Kaltura video player is how you can theme it using ThemeRoller. Check this link for a sample theming of Kaltura and play with the controls of ThemeRoller on the right panel. With only two clicks you can get this theme for your player!

However, it didn’t worked with Safari 5. Works good with Chrome, Firefox and Opera.

JW Player for HTML 5

This video player is still in beta version and released under JW’s own PUEL license (for personal or educational use or as a product evaluation but not for commercial works), the demo claiming to be the most compatible across browsers, MP4 with a fallback to Ogg, fails on Safari 5. A single MP4 video works properly on Safari 5 and falls back to Flash on other browsers.

SublimeVideo HTML5 Video Player

Despite its slick interface and effects, as of writing, SublimeVideo’s HTML 5 Video Player fails miserably in Safari 5 (7533.16) for Windows. Works on Firefox, Chrome and Opera. It’s still not available and when it’s released it will be licensed as free for personal use but won’t be free for commercial use.

Video JS

The Video JS player is offered under the Lesser General Public License and although it looks really cool, it fails on Opera and fall backs to a Flash player under Safari.

FlareVideo

Working perfectly on all browsers, FlareVideo features fullscreen, elapsed time, fall back for non-HTML 5 capable browsers and a simple system for theming. Plus, it’s offered under a MIT license so you can safely use it on your commercial projects.

Video formats supported by HTML 5

When considering video we must separate the concepts of container and codecs. Long story short, a container is a box where you can store things. A codec is how you store those things within the box. The three most popular container formats for HTML 5 video are OggWebM and MP4. For video codecs, we can quote Theora, VP8 and H.264. Finally, we have Vorbis and AAC as audio codecs. More often than not, you will find references to the concepts of container and codec as one. For instance, Ogg-Theora-Vorbis, WebM-VP8-Vorbis and MP4-H.264-AAC.

HTML 5 video has more to do with browser support, as you might have guessed. Latest version of Google Chrome, supports both MP4 and Ogg-Theora and if you’re in the developer channel with build 6.0.422.0 you have WebM support as well. Firefox supports Ogg-Theora as of version 3.5 and the nightly builds supports WebM. Opera provides Ogg-Theora support since version 10.5x but version 10.60 beta already supports WebM. Safari only supports MP4-H.264 and it’s unlikely that this is going to change. Presumibly, you can get Ogg-Thora support in Safari for Mac using the Xiph extension for QuickTime. The following are the official sites of WebM and Theora.

http://www.webmproject.org/

http://www.theora.org/

Encoding video for HTML 5

Since the announcement of the WebM Project by Google, many popular video encoders vendors started building the means to encode WebM in their product. To encode Ogg-Theora, however, there were a lot of solutions already available including a plugin for Firefox, Firefogg. The free encoder ffmpeg also brought WebM support to the open source world. Even if it’s not in the repository yet, you can build your own ffmpeg with WebM support or just grab one of the precompiled binaries for Windows to produce WebM files. However, ffmpeg is an advanced utility and most entry-level users will be daunted by its myriad of options and the command line. Let’s examine some other alternatives to encode HTML 5 videos in WebM, Ogg and MP4 formats:

Miro Video Converter

Miro Video Encoder is definitely the easiest to use. It features no option other than choosing the output format. You can choose between WebM, MP4, Ogg-Theora. Just drag and drop your video on Miro Video Converter and click Convert. That’s all you need but also that’s all you get, no other options are available. The output format scripts are not even editable, not even if you dig into the installation folder. You can view a list detailing the conversion scripts but these are hardcoded into the software so you would need to compile Miro (which is free and open source and forkable on GitHub).

MakeWebM

The WebM project offers a tool to encode WebM video using Windows command line named makewebm and currently in version 0.9.8.0. Go to the DirectShow Filters section on WebM Tools area and follow the instructions.

Handbrake

This is a tool with a slow development process, although it is perfect for creating MP4 videos to deliver on web and iPhone/iPod devices. Doesn’t create Ogg videos though.

SUPER®

A more generalist utility is Super® by eRightSoft, an encoder supporting both Ogg-Theora-Vorbis and MP4-H.264-AAC schemes (in addition to a myriad of other desktop formats). Definitely not the best looking interface but it really does its job and is good at it.

FFCoder

The FFCoder video encoder is another generalist utility featuring encoding for MP4 and Ogg containers.

Firefogg

Finally, Firefogg is a simple extension for Firefox (with an interface built with jQuery UI) to encode video into Ogg-Theora-Vorbis format. Note that the video is not uploaded anywhere, but converted using your own computer so your data is safe. If you browse its extension folder you will see a bin folder containing the ffmpeg2theora encoding utility which is used to encode your videos into Ogg-Theora format.

Conclusion

So, what format should you use? no format is supported in all browsers, you will have to use some kind of fall back. I have to say that MP4/H.264 is currently the best option. Why? because you encode only one video. You insert an HTML 5 player for Safari/Chrome browsers and iPhone, iPad, iPod (and most other smartphones) devices and add a Flash player as a fall back for Firefox, Opera and Internet Explorer. This Flash player will use the same video file you encoded. With other approaches you must encode at least two videos. Furthermore, MP4 works on XBOX and PS3 as well.

WebM is the only hope, as the support provided by upcoming versions of Firefox, Opera and next Flash Player will make it more ubiquitous. However, it’s rather unlikely that Apple and Microsoft are going to support this format, as they have licensed the H.264 standard for their use and are currently using it on all their platforms.


“Pocket guide to HTML5 and Video” received 14 comments! Add yours.

  1. Heather June 28th, 2010

    You rock! Thanks for putting this together. Flarevideo looks pretty sharp.

  2. Elio June 28th, 2010

    Thanks Heather. FlareVideo and the OSM Player would be the perfect choice since they were the only players that worked perfectly on all browsers.

  3. jpvincent June 29th, 2010

    i was waiting for a long time for someone to compare all those HTML5/Flash players that were released those days. You dit it, many thanks :)

    about WebM : what we really wait in order to replace the h.264 option is Flash to also support it. Adobe is part of the WebM council, so it should ship out with a version of Flash one day or another

  4. Winart June 29th, 2010

    Great write up.

  5. Elio June 29th, 2010

    Thanks Winart.
    jpvincent, the fact is that Apple is using H.264 in iPhone/iPad/iPod and those devices have a lot of market share. Even Android supports H.264 and doesn’t supports WebM yet!

  6. Alexandr June 29th, 2010

    Thank Winart!
    Better to use the format that is supported in all browsers: Mozilla, Opera, Chrom. It is also important in the iPhone and IPod!

  7. Yaron June 30th, 2010

    You can use a free trial of Kaltura’s service to automatically convert your videos to all html5 codecs (but you’ll have to ask for it to be set up for you after you sign up) – http://corp.kaltura.com/about/signup. They says their HTML5 video player will soon be providing statistics and advertising support (monetization).

  8. Elio July 1st, 2010

    I had great expectations when I started reviewing Kaltura, however, the fact that the demo failed in Safari makes it an inconvenient choice. It is also noticeable that the Watch Product Tour on their HTML 5 Video page uses a Flash player to play the video. Again, it’s a damn fine player and I hope they fix any issues on Safari 5 soon.

  9. Maria M. August 6th, 2010

    Enjoyed this article. However, my employer had chosen .wmv as their video format and this will not change. Also because we have 100s of videos on our site, the decision was made not to embed a video player. Bottom line, I will not be using HTML5….

  10. Elio August 6th, 2010

    I hear you there Maria, HTML5 based video is just not ready for mass consumption. After all these tests I concluded that the best choice is to go with… MP4/H.264/AAC. Why? because it just works (no pun intended). You can add a MP4 video for Chrome, Android, Safari, iPhone, iPad and even Firefox will play it with QuickTime installed. For the rest of browsers you can just fallback to a Flash Player. In that way we only need to deploy one video file.

  11. 4r Web Solutions Blog » Exploring new input types in HTML 5 December 21st, 2010

    [...] have talked in the past about the outstanding video capabilities in HTML 5, but video elements are not even close to be as ubiquitous as web forms. Even the most simple [...]

  12. 180+ HTML5 Tutorials and a Round-Up of HTML5 Round-Ups - WebsitesMadeRight.com April 19th, 2011

    [...] Pocket guide to HTML5 and Video (ilovecolors | Jun 28, 2010) [...]

  13. 180+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com April 19th, 2011

    [...] Pocket guide to HTML5 and Video (ilovecolors | Jun 28, 2010) [...]

  14. 270+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com April 22nd, 2011

    [...] Pocket guide to HTML5 and Video (ilovecolors | Jun 28, 2010) [...]

Leave a comment