HTML5 Video

I’m not exactly strong at javascript, but I spent the last hour picking apart the YouTube HTML5 <Video> test to figure out just what was needed to get the video to play. It turns out it’s not as simple as the put-it-in-and-go of <img> tags; it requires a kickstart with javascript. I whittled away at the HTML file and the javascript file until I was left with the following lines:


<body onLoad=”document.getElementById(‘vid’).play();”>
<video id=”vid” src=”vid.mp4″ />
</body>

That can fit in a twitter, so it’s not too much.

Oh, god, that’s going to become a new measurement:
“Hey, how long is that story you wrote?”
“Oh, about a hundred twitters.”

At any rate, toss the above code into an blank text file, rename it to .htm, and open it in Safari 4 or Chrome 3 or whatever else has <video> support.
(Beware a quote that becomes a question mark. I think wordpress does something funky and makes one of those good-looking quotes that doesn’t translate well to ANSI.)

As a final service, to anyone who tries to talk about html tags in forums and has the forum eat the tags, you need to type them like this:
&lt; becomes <
&gt; becomes >
&amp; becomes &
So to write <video>, you actually type in &lt;video&gt;

EDIT:
It looks like the code is fickle, so things I was trying before weren’t working. The following code runs a movie:
<video onClick=”this.play();” src=”vid.mp4″ />

I like to use the following:
<video onMouseOver=”this.play();” onClick=”this.pause();” src=”vid.mp4″ />

Another thing I’ll mention is that I’m referencing an mp4 video, which is a proprietary codec. Theora is an open-source codec that seeks to replace it.

Tags: ,

Leave a Reply