Tuesday, November 13th, 2007

HTML5 Media Support: video and audio tags and scriptability

Category: HTML, JavaScript, WebKit

WebKit keeps on trucking and has added support for the HTML 5 media tags such as <video> and <audio>.

You can add video to a page as easily as:

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

That is a lot cleaner than the mess of embed/object/JavaScript wrappers that we have today. Also, there is nice scripting support so you can play/pause a video:

  1. <script>
  2. function playPause() {
  3.   var myVideo = document.getElementsByTagName('video')[0];
  4.   if (myVideo.paused)
  5.     myVideo.play();
  6.   else
  7.     myVideo.pause();
  8. }
  9. </script>
  10. <input type=button onclick="playPause()" value="Play/Pause"/>

You can also tie into events:


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

and programatically do your thing:


  1. new Audio("song.mp3").play();

One key issue has always been the codec game and royalties to mpeg.

Posted by Dion Almaer at 7:46 am

4.2 rating from 49 votes


Comments feed TrackBack URI

Very cool and a great step in the right direction. I like how these media items are treated as regular elements in the dom. But I can easily see this being an issue across browsers, IE will handle how it knows when a video has started or stopped differently than FF, etc.
I would have thought that the autoplay attribute would be autoplay=”autoplay” just like any other valid tag attribute.

Comment by EmEhRKay — November 13, 2007

Attributes should have values indeed. But “autoplay=autoplay” doesn’t make sense, really. If it’s a boolean value you could just make it “autoplay=true” or “autoplay=yes”, much more readable and it makes more sense, grammatically.

Comment by Marcel — November 13, 2007

Do not forget to check out Opera’s implementation

Comment by Zsolt — November 13, 2007

Marcel, we want it to remain consistent with the rest of the HTML standard.

Comment by Anne van Kesteren — November 13, 2007

I feel that the “autoplay” feature is a bad bad idea. At least i am sure it will get abused browsers will eventually come up with a Disable Autoplay for video/audio option.

Comment by Kyriakos — November 13, 2007

There’s something strange in JS code: getElementsByTagName usually returns array, so what myVideo.play() code will intend to do if there are more than one video tag? Play them all? huh

Comment by emil — November 13, 2007

Yippee! Now we need to back to installing every codec ever made again! I can hardly wait!

Comment by Axel — November 13, 2007

it will play only the first video. If you look closely you’ll see that the code is: “var myVideo = document.getElementsByTagName(‘video’)[0];”

Comment by Jacob — November 13, 2007


Maybe we’ll get a VLC webplugin

Comment by EmEhRKay — November 13, 2007

Of course, shame on me, did not scrolled source code to the right…

Comment by emil — November 13, 2007

Kyriakos, such a feature is kind of the point. If there was no autoplay=”” attribute authors would implement that by script, which would make it way harder for people to disable if they wanted to.

Comment by Anne van Kesteren — November 14, 2007

Anne, I understand there are standards, I’m just saying that – in my opinion, anyway – attributes and their respective values should make sense. To me, “autoplay=autoplay” looks rather unconventional.

Alas, HTML5 is still several years away from mainstream use and abuse. For now I’ll stick with Flash videos where necessary, and I’ll be putting them in my pages using javascript ;-)

Comment by Marcel — November 14, 2007

as far as i know the video tag uses the Theora codec, so install that and everything should be good.

Comment by Zsolt — November 14, 2007

Marcel, that is exactly how XHTML has been handling boolean, “valueless” attributes, like “checked” and “disabled” in form elements.

Comment by Daniel Luz — November 25, 2007

Leave a comment

You must be logged in to post a comment.