HTML5 is far more than just a drop-in replacement for embedding

At the A11y Hackdays event in Birmingham this week Bruce Lawson of Opera gave a talk about HTML 5’s video and audio capabilities, and explained something that I hadn’t really grasped about them. The main topic of discussion has typically been the competing codecs issue (webm vs Ogg vs mp4) or just how neat a <video> tag is instead of all the bleh code you end up with for a movie plugin.

However the real big deal about the <video> element is that it makes video a fully integrated part of the web.

What does this mean? Well, it means that:

  • You can control videos easily using JavaScript
  • You can style the video controls using CSS
  • You can control the style of the video itself using CSS
  • You can make the video itself use CSS transitions – fade in, fade out, grow on hover etc
  • You can use the keyboard to tab into video controls

It also means that videos play nicely with other page elements – for example not cutting off menus or staying in place while their container is dragged around, or ignoring surrounding CSS.

One thing that particularly impressed me was a demo of Web-VTT text tracks. This is a new standard format for adding text tracks to HTML5 video; the idea here is that the text track is synced with the video and overlaid as text in the document rather than burned into the video frames. Which means subtitles, audio descriptions and captions can be styled, positioned, and copied-and-pasted.

Plus, as the text track is just a text file linked from the <video> tag, it can be indexed by search engines:

<video class="playr_video">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 <track kind="subtitles" label="English - WebVTT" srclang="en" src="test.txt">
</video>

Being able to pause a video and then select and copy the subtitle text is a great demo of this technology. Beyond the obvious a11y uses I can see this being used in all kinds of interesting ways – for example adding teacher feedback to student videos, adding critiques, or just making the process of remixing Downfall parodies a bit more efficient (thanks to Brian Kelly for that suggestion!)

Unfortunately, Web-VTT support isn’t built into browsers as standard yet, but you can get a preview of the experience using Playr (another example is here).

Useful links:

About these ads
This entry was posted in a11y, standards. Bookmark the permalink.

One Response to HTML5 is far more than just a drop-in replacement for embedding

  1. Media integration can get even deeper than that: it is now possible to have native javascript MP3 decoders running in the browser: http://jsmad.org/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s