Techie Tip of the Week: HTML5 video

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:

  1. Make one version that uses WebM (VP8 + Vorbis).
  2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
  3. Make another version that uses Theora video and Vorbis audio in an Ogg container
  4. 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:

20120310-131246.jpg

For more information, visit http://diveintohtml5.info/video.html, from which parts of this posting were taken from (CC license agreement).

Tags: ,

3 Responses to “Techie Tip of the Week: HTML5 video”

  1. teen selfshot porn Says:

    teen selfshot porn…

    [...]IT Services Technology Training Techie Tips » Blog Archive » Techie Tip of the Week: HTML5 video[...]…

  2. RaspberryPi Says:

    i love this website. learnt a lot from it. thnx

  3. Bling diamante balckberry hard covers Says:

    Bling diamante balckberry hard covers…

    [...]IT Services Technology Training Techie Tips » Blog Archive » Techie Tip of the Week: HTML5 video[...]…

Leave a Reply

You must be logged in to post a comment.