Prior to the HTML5 specification, there didn’t exist any standard way of displaying video content on web sites. Some video tools used the EMBED tag; others used OBJECT — and all required the visitor to download and install a plugin (like QuickTime or RealPlayer).
With the advent of HTML5, there is a new standard way: the VIDEO tag. Support for the VIDEO element is still evolving, so it doesn’t work yet on all browsers.
VIDEO ELEMENT SUPPORT
- IE: 9.0+
- FIREFOX: 3.5+
- SAFARI: 3.0+
- CHROME: 3.0+
- OPERA: 10.5+
- IPHONE: 1.0+
- ANDROID: 2.0+
To further complicate matters, no one codec is supported across browsers. Some support mp4, others webm, others ogg. Here’s the current lay of the land:
VIDEO CODEC SUPPORT
- IE: WebM and MP4
- FIREFOX: OGG and WebM
- SAFARI: MP4 (and other formats if their QuickTime plugins are also installed)
- CHROME: OGG and WebM
- OPERA: OGG and WebM
- IPHONE: MP4
- ANDROID: MP4 and WebM
For maximum compatibility, the video workflow wil be:
- Make one version that uses WebM (VP8 + Vorbis).
- Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
- Make another version that uses Theora video and Vorbis audio in an Ogg container
- Link to all three video files from a single VIDEO element, and fall back to a Flash-based video player
The final markup uses a VIDEO element for HTML5 video, a nested OBJECT element for Flash fallback, and a small bit of script for the benefit of Android devices:
For more information, visit http://diveintohtml5.info/video.html, from which parts of this posting were taken from (CC license agreement).