HTML5 Multimedia Accessibility at DevCSI Accessibility Hack Day
Fate took me five miles up the road to Aston University for a DevCSI Accessibility Hack Day where I spoke on HTML5 multimedia accessibility. Here are my slides:
- Introduction to HTML5 video by Moi and Patrick Lauke
- Video for Everybody - Kroc Camen frankensteins in olde-worlde Flash embed code as fallback for HTML5 video
- Video API spec
- Spec for the
<track>element for subtitles/ captioning etc
- WebVTT format explained by Ian Devlin
- Playr - lightweight polyfill script that fakes
<track>support in browsers that don't have native support (eg, all of them)
- MediaElement.js - jQuery-based polyfill that fakes track support and degrades to custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers
- Synchronising multiple media elements - nascent specification: highly liable to change!
getUserMediawith bonus link to the Magic HTML5 Moustache demo
After an evening hacking, Scott Wilson put together a webVTT generator W3C Widget. Download it, double click to install (on a system with Opera Desktop or similar Widget manager and run-time installed). Point it at a video, then simply pause the video after a "screenful" of dialogue, enter that subtitle, unpause, rinse and repeat, then hit the VTT tab and copy and paste your VTT file.