HTML5 Media Support

Another nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5 <video> and <audio> elements add native support for embedding video and audio content in web pages. They also provide a rich scripting API for controlling playback. Adding video to a web page is almost as simple as adding an image:

<video src=sample.mov autoplay></video>

To make a button that gives the user basic playback controls you could do this: 

<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
</script>
<input type=button onclick="playPause()" value="Play/Pause">

The specification also defines a set of events that can be used to react to changes in media playback and load state. For example:

myVideo.addEventListener('ended', function () {
  alert('video playback finished')
} );

To play audio from JavaScript you can simply do this:

var audio = new Audio("song.mp3");
audio.play();

The implementation is still a work in progress and not all features (including the ‘controls’ attribute which gives native playback controls) of the specification are there yet. The current implementation supports all formats that QuickTime supports, including installed 3rd party codecs.

The example below uses the ‘poster’ attribute of the <video> element to display an initial image before the video is loaded, progress events to track loading, and play/pause/ended events to make the overlay button reflect the video’s state.