CW Developer Network

Sep 15 2010   7:15PM GMT

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

Cliff Saran Profile: Cliff Saran

Tags:
bemoko
IE9
iPhone

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.

 

brightcove.createExperiences();

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>
  </video>

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’);
  video.addEventListener(‘click’,function(){
    video.play();
  },false);
</script>

 Comment on this Post

 
There was an error processing your information. Please try again later.
Thanks. We'll let you know when a new response is added.
Send me notifications when other members comment.

Forgot Password

No problem! Submit your e-mail address below. We'll send you an e-mail containing your password.

Your password has been sent to:

Share this item with your network: