HTML 5.0 tutorial: the advantages of native media support for delivering video

This is the first post in a tutorial by web application specialist Mat Diss, covering the new features in HTML 5.0.

HTML5 brings native media support to the browsers.  There has been much fragmentation in the format of video and audio that is required for web delivery. Historically this also came with a lack of control for how the media will be displayed (e.g. embedding in a page) and the requirement for extra plugins. This makes it more costly for service providers to deliver media and makes media experiences less than seamless for the end user. By standardising the media support within a web environment this fragmentation can be brought under control, making video deliverable easily accessible to all and make experience more pleasurable for the user.



There is still the ongoing battle between the Ogg, H.264 and WebM video codecs.  H.264 brings widely accepted improved video delivery, but in a propriety format.  Google created WebM to provide an open standard to compete with H264.  MPEG LA in response have recently announced that it will indefinitely extend the royalty free use of h264 for free web content. With strong and passionate arguments on either side.  Standardisation brings with it significant performance benefits with device manufactures bringing standard video codec processing into hardware instead of software which can lead to over twice as much battery life.

Mat Diss, is founder of bemoko, a UK mobile Internet software company pioneering new ways for web designers to construct websites that can be delivered across multiple platforms.

Native video support allows videos to be embedded within the page much like we currently embed images in the page, without the need of a plugin. You can drop a video in the page with:

  <video width=”320″ height=”300″ controls=”controls” id=”videocontent”]]>
    <source src=”/videos/video.3gp”></source>
    <source src=”/videos/video.mp4″ type=”video/mp4″></source>
    <a href=”/videos/video.mp4″]]>Download this video.</a>

It’s still early days for native video support This example works as is on Chrome browsers, Firefox requires an Ogg format video and Android requires you to add a little bit of Javascript:

<script type=”text/javascript”]]]]>
  var video = document.getElementById(‘videocontent’);