Video and Audio in HTML5

HTML5 allows embedded video to play natively in the browser. In order for a browser to play video it needs to include a video codec. Each video format has a different codec. Since W3C (the governing body of the HTML standard) decided not to specify a standard video format, each browser developer is free to choose what video format to support.

So far the two main choices are H.264 and Ogg Theora formats. Some browsers support one or another, and only Chrome has decided to support both. Most online video is currently encoded using the H.264 codec, and many devices support hardware decoding which greatly improves performance and battery life.

Another important aspect that was left out of the standard was streaming. Without any definition on streaming we are left to whatever mechanism browser and server developers want to support.

The situation with audio is similar in terms of the scope of the specification, different formats available and the support by major browsers.

On top of that none of the browsers (except for Opera) currently support all the video and audio functions (controls) specified in HTML5.

It is a good idea for developers to start using the new audio and video support in HTML5 browsers, specially for iPhone and iPad users. However, you cannot yet depend only on the new HTML5 video and audio support. You will need to implement advanced scripts to detect browser capabilities and then use the best presentation option.

Animation in HTML5

One aspect of the comparison between Flash and HTML5 that seems to have been left outside is the animation capability. HTML5 relies mainly on JavaScript to provide rich animations and interactivity. However, this is intended to be used together with the new HTML canvas tag for drawing of 2D and 3D objects, CSS3 animation and transformation capabilities, as well as browser support for SVG (scalable vector graphics) and web fonts.

Similar to the situation with audio and video, most browsers support canvas, SVG or CSS animations partially or not at all.

Flash is much better positioned to deliver animations because developer do not need to worry about complex math functions to create complex movement. While there are several JavaScript frameworks, none of them provide such advanced development functionality as Flash.

Browser Support

The following table shows the current support level of different audio, video and animation functions in HTML5 and CSS3 that are needed to compete with Flash.

	Video H.264	Video Ogg	Audio MP3	Audio WAV	Audio Ogg	Canvas Tag	SVG	CSS Anim.
IE 9	♦ p		♦p				♦ p
Firefox 3.6	♦ p			♦ p	♦ p	♦ p	♦ p	e
Firefox 3.5	♦ p			♦ p	♦ p	♦ p	♦ p
Chrome 5	♦ p	♦ p	♦ p		♦ p	♦ p	♦ p	e
Chrome 4	♦ p	♦ p	♦ p		♦ p	♦ p	♦ p
Safari 4	♦ p		♦ p	♦ p		♦ p	♦ p	e
Opera 10.5		♦		♦		♦ p	♦ p
Opera 10.0		♦		♦		♦ p	♦ p

Source: Wikipedia - HTML5, CSS3, SVG
Notes: p - partial support, e - experimental

The following chart shows the current market share of the different browsers. Unfortunately the market is vastly dominated by browsers that do not have sufficient support of HTML5 or CSS3.

Source: StatCounter Global Stats

Conclusion

Is HTML5 Replacing Flash? I don't think so. The standards and browser support are not yet in a point where it could replace Flash for video and audio playing, and even less for advanced animations. I do believe that standards and support will advance and eventually will get to a point where they become a strong alternative for audio and video playing.

Except for the need to serve iPhone and iPad users there are no compelling reasons for developers to convert their existing websites from Flash to HTML5 video, or even less to re-encode video material. If any, the current state is requiring additional work and complexity in website development if HTML5 video is desired.

If you are developing a new website or want to support HTML5 video, you may want to try the Longtail Video JW Player for HTML5, a collection of scripts and settings that allows you to deploy video using native HTML5 support or Flash when necessary. Note that it is still in beta version.

References:

http://www.webmonkey.com/2010/05/who-needs-flash/
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
http://www.apple.com/hotnews/thoughts-on-flash/
http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx
http://www.themaninblue.com/writing/perspective/2010/03/22/
http://www.longtailvideo.com/support/blog/11887/html5-video-not-quite-there-yet