Site icon StartFunction

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:

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):

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

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

Playback controls

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

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

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.

Exit mobile version