Tuesday, November 13th, 2007
Category: HTML
, JavaScript, WebKit
<
p
>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:
HTML:
-
-
<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:
HTML:
-
-
-
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"/>
-
You can also tie into events:
JAVASCRIPT:
-
-
myVideo.addEventListener('ended', function () {
-
alert('video playback finished')
-
} );
-
and programatically do your thing:
JAVASCRIPT:
-
-
new Audio("song.mp3").play();
-
One key issue has always been the codec game and royalties to mpeg.
- HTML 5
HTML 5 is the next revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of...
- Video, HTML5 canvas and the codec cavalcade
Browser support is again a new frontier. Video codec are a central issue. A variety of codecs are being offered for HTML5. Some codecs may be the...
- Cross-browser friendly HTML code
Here are some basic guiding principles to help Java developers build Web applications that start out with high cross-browser compatibility, without...
- Audio, Chapter 2 of "Linux Multimedia Hacks"
Whether you just want a simple audio player, or the power to rip, burn and mix, this chapter explains audio programs and the hacks necessary for the...
- Pros and cons of HTML5 for business
HTML5 brings business benefits but also challenges. How will the new HTML standard effect businesses, developers and...
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.
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.
Do not forget to check out Opera’s implementation
http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/
Marcel, we want it to remain consistent with the rest of the HTML standard.
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.
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
Yippee! Now we need to back to installing every codec ever made again! I can hardly wait!
@emil
it will play only the first video. If you look closely you’ll see that the code is: “var myVideo = document.getElementsByTagName(‘video’)[0];”
@Axel
Maybe we’ll get a VLC webplugin
@jacob
Of course, shame on me, did not scrolled source code to the right…
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.
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 ;-)
@Axel
as far as i know the video tag uses the Theora codec, so install that and everything should be good.
Marcel, that is exactly how XHTML has been handling boolean, “valueless” attributes, like “checked” and “disabled” in form elements.