Inhaltsverzeichnis

1. Intro Inhalt

Dear all, html5 seems to be the uprising new technology on and for the interwebs that for once doesn’t look like a hype not worth any attention from experienced developers. Not only will we be able to develope cross platform apps in plain html/css/js, but also major features like file system access and multimedia support on any device are within grasp.

My job for a project was to get a video viewable online which was up to now only available as download, and even worse, an avi container with M$-encoded content. Time for html5 to show off.

Since it took me a week to get it running in all major browsers and lots of hours for debugging and digging up solutions on the net, I’d like to share my findings in hope that you won’t have to spend as much time as I did. The video now plays in those browsers (tested myself):

• Internet Explorer 9
• Firefox 17
• Chrome 23
• Webkit 533.1 (Gingerbread 2.3.5)
• Opera 12
• Safari 5

2. Encoding Inhalt

Let us first cover the necessary equipment. We will obviously need to transcode our video to the three commonly used video containers (ogv, mp4 and webm) and certain codecs. I recommend using miro video converter for Windows, it has all necessary presets installed and works „one-clicky“. Simply drag your source video into the main window and choose an appropriate file format from Format -> Video; you will need the MP4 and the OGG/Theora encoded versions.

Unfortunately you can only choose one format at a time, but at least the video(s) will stay in the queue. A second drawback it that you do not have influence over the encoding quality, if you want to use ffmpeg yourself, here are the settings Miro uses for encoding.

3. Browser Caveats Inhalt

Certain browsers require some additional tuning which we are going to cover here. If a browser is not mentioned, it worked out of the box on Windows 7 x64, no additional steps necessary.

3.1 Internet Explorer 9 Inhalt

Particularly annoying is this browsers handling of html5 video. For days I had a sporadic error where the video would play once and then never again not even after closing the browser or restarting the machine. It seemed to occur more often when testing against my local developement web server; accessing the video over the external dsl connection seemed to get it playing more often, however, definitely not good.

Thing is that this browser requires the preload attribute to be set, and to be set to none. After that all previously encoded videos played like a charm.

3.2 Firefox Inhalt

The browsers request header indicates a priority of OGV over WEBM, however, if you specify the WEBM-source prior to OGV within the <video>-element, it will be used. WebM seems to produce way larger files with Miro than OGV, so you might want to omit this format it alltogether.

3.3 Safari Inhalt

Even the latest safari did not play an MP4 out of the box, but the solution was found via one’s favourite search engine. Safari needs Quicktime installed on the machine, at least on Windows 7 x64. If you encounter a non-playing MP4, install the free version (decoder) of Quicktime, restart the browser ê vóila, you’re good to go.

By contrast, it doesn’t seem necessary anymore to populate the <video> elements src attribute. It also doesn’t seem necessary anymore to give an absolute url to any video source, relative paths seem to work quite well now.

4. Video-Tag and its attributes Inhalt

Let’s have a look at the major attributes aforementioned browsers support. Note that while attributes without values (like <video controls></video>) are supported by most browsers such a notation is not XHTML conform, neither is an empty boolean value (like <video controls=““></video>). If a value is not needed, you may use the attributes name instead (like <video controls=“controls“></video>).

• src: Formerly used to specify the desired video file. Still supported in some browsers, however, better use it within the <source></source> element.
• poster: Specify an image to be displayed until the user starts watching or autoplay kicks in.
• autoplay: if set, the video starty immediate playback, if all prerequesites have been met. It is up to the browser to delay playback until enough data has been preloaded. Some browsers do, in others ou will have stuttering playback after a while.
• controls: Display the video controls as overlay over the video image when playback is stopped or the mouse is hovering over the element. Controls‘ UI is browser-dependent. Omitting this tag will not disable the context menu, but at least will give you the chance to code your own UI and functionality via JavaScript and your own images.
• preload: Can be set to auto, metadata and none. The first option will load the resource completely, the second one only some information and the third one will not touch the file in any case.

Although the video element supports width- and height-attributes, you may want to use CSS for styling, since with CSS you have a lot more options at hand.

5. All together now Inhalt

So, for a complete and working html5 video solution with flash fallback you will need a <video> element like this. Note that the flash player used („JW Player“) does not come for free, you will find licensing options at their website.

<video controls="controls" width="384" height="288" class="video" poster="images/poster.jpg" preload="none">
  <source src="video/test.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
  <source src="video/test.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object type="application/x-shockwave-flash" data="video/mediaplayer.swf?width=384&amp;height=288">
    <param name="movie" value="swf/mediaplayer.swf?width=640&amp;height=375" />
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="flashvars" value="image=images/poster.jpg&amp;searchbar=false&amp;shownavigation=true&amp;showdigits=true&amp;showdownload=true&amp;autostart=false&amp;smoothing=true&amp;file=test.flv" />
  </object>
  <small><br />Unfortunately you don't seem to use a modern html5 capable web browser or have Adobe flash enabled. Please change to a modern browser or enable Adobe Flash.</small>
</video>

Hope it helps.