HTML5 Media Support
Posted by Antti Koivisto on Monday, November 12th, 2007 at 2:14 pmAnother 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.
November 12th, 2007 at 2:48 pm
Thank you so much! This object-and-embed-stuff has been really a PITA, so far. The only workaround, a flash object (flv player), is reliable but not scriptable as your solution. Cheers!
November 12th, 2007 at 3:03 pm
Sigh. I know this has probably been debated ad nauseam in other places, but HTML markup is terrible and inconsistent. Why did you choose to have a closing tag in the example but not quoted attributes? Using XHTML, the markup is far more consistent and gives a better example to others who eventually will want to serve their XHTML5 with the proper MIME type (application/xhtml+xml).
<video src=”sample.mov” autoplay=”true”/> is much more consistent and instructive.
November 12th, 2007 at 3:12 pm
@mrael2: This isn’t an appropriate place to debate the merits of HTML vs XHTML. Antti’s example is valid HTML 5 which is as much as is relevant to the topic.
November 12th, 2007 at 4:03 pm
[...] has experimental support. Opera has experimental support. And now, Webkit has experimental support. The new HTML5 <video> element is getting support from a large part of the browser [...]
November 13th, 2007 at 1:29 am
Very nice. What about streaming?
November 13th, 2007 at 4:11 am
Does this new video support include Ogg Theora, as recommended in the HTML 5 spec, or does it only play video for which you already have codecs installed on your machine?
November 13th, 2007 at 10:00 am
Streaming works in principle but has not been tested much yet. Some events may not work as expected.
Ogg should work fine if you have a suitable codec installed. You can use <source> elements to give alternative formats, the implementation will pick the first one that is supported.
November 13th, 2007 at 10:05 am
[...] keeps on trucking and has added support for the HTML 5 media tags such as <video> and [...]
November 13th, 2007 at 2:23 pm
[...] Webkit just annonced that they are working on media tag support based on the HTML5 draft. It is currently implemented on Mac build and is based on the support of Quicktime. Another nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5 and 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 [...]
November 14th, 2007 at 10:36 pm
[...] nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5 and elements add native support for embedding video [...]
November 15th, 2007 at 6:04 pm
[...] The longer answer is a bit more complicated. We could, of course, just leave legacy pages without a DOCTYPE and carry on, boldly into the future, but some pages (like stories) still use components that don’t expect a DOCTYPE and break the page rather horribly. We’re also having to reconfigure our CMS to support DOCTYPES properly – a task that’s actually more difficult than writing a line of markup at the top of the page. For instance, to be XHTML compliant, we have several dozen legacy bugs to fix to be considered valid XML. I’m personally lobbying for HTML 5, so, Safari 3 users, get ready. [...]
December 21st, 2007 at 12:05 am
[...] Opera and WebKit have released builds with partial support for the video element. You may download the experimental [...]
December 23rd, 2007 at 8:57 am
[...] addition. And if you can’t wait that long and just have to jump into the thicket, both Opera and Webkit have experimental builds with some [...]