Ajaxus place on the net

Another nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5

<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

Opera’s implementation is similar, including informative text when the media is not available:

<video controls src="demo.ogg" id="myVideo">Theora decoder not found</video>

Related posts:

1. Browser Wars: Mozilla, IE, Opera join up for a panel discussion
2. Ten New Things in WebKit 3