Wow, That’s Cool… Fun With HTML5 Video

Loose notes from the SXSW 2010 session Wow, That’s Cool… Fun With HTML5 Video, with Michael Dale of Wikimedia and Christopher Blizzard of Mozilla.

“Using the video tag in HTML5, developers can do all sorts of things that are hard or impossible with plugins. In this presentation, Mozilla will show the best and most interesting hacks entered into OVA’s Open Video Contest-because when the webmonkeys unleash their creativity, things get interesting.”

96% of web developers say they were self-taught. The web is self-teaching.

OGG originall designed for streaming radio. Video added in later (Theora format). Mozilla found. worked with people who built the container, worked with browser makers, etc. The web influenced how video codecs and containers actually work. We want to see competition create better performance. We want to see video connect to all the other changes going on on the web. SVG, CSS and other technologies all come together.

Mozilla: Has a public meeting every week to discuss directions, changes. Wiki tracks all of this for public. They stream it live, jam streamed video right into the wiki.

Open Video Alliance: Live chat with Lawrene Lessig – streamed with HTML5 video (first streamed HTML5 video event). The ogg container is designed for streaming, even over http.

Demo: Dragged an image from desktop into a playing video and the image was incorporated as a moving image into the video in real time. Using a combination of SVG and HTML5 video.

Demo: Asked people to tweet stuff to a special hashtag. Then rendered a video of Der Fuerer ranting out the results of the tweets. Real-time compositing.

There are security issues related to full-screen video. The spec warns against it, but the WebKit guys put it in anyway (so yes you can do it).

No DRM support yet. But if DRM could be done with open standards, Mozilla would be OK with it.

To make OGGs: Use MakeOgg / FireFogg

With video in a wiki, users can insert their own outbound links at certain timecodes as the video plays.

Fallback system:

<video controls>
<source type=”video/ogg” src=”foo.ogv” ontimeupdate=callBackFunction() />
<source type=”video/mp4″ src=”foo.mp4″ />
Your browser doesn’t support HTML5 video.
You could also put Flash or other embed methods here.
</video>

By default no controls are shown. Add the empty “controls” attribute to get them. (“controls” is a boolean so “controls=false” will still give you controls. Just use “controls” or don’t. Least favorite aspect of HTML5 so far.)

Available events:
“I have enough buffer to play through”
Duration
Natural size
Current timecode

Check out the <a href=”http://people.mozilla.com/~blizzard/launch/”>STS-116 Launch Profile demo</a> – shows related charts being drawn in real time, correlated to timecode in the video. Canvas elements, overlayed div containing web fonts flipping in tenths of a second, etc. Very cool.