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 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!)