Twitter subtitles on Vimeo using HTML5

One of my frustrations when putting together the Gordon Brown’s Building Britain’s Digital Future announcement with twitter subtitles example was that the video was embedded within a custom flash player which meant I couldn’t overlay subtitles within the player. Since I making the original post Downing Street have since put Gordon Brown’s speech on YouTube which makes it possible to use the JW Player to embed the original video with your own caption file (via the captions plugin). You can see the new version of Gordon Brown’s speech with twitter subtitles here

hmm it just occurs to me that I haven’t put a post together on how the twitter subtitle generator was extended to allow a selection of the twitter timeline to be overlaid on any embeddable YouTube video. It is very easy as the JW Player caption plugin uses the same xml format as BBC iPlayer. Simples

After my first post on Twitter powered subtitles for BBC iPlayer Tony Hirst followed up with a with this post which highlighted some of his own research link to Accessible HTML5 Video with JavaScripted captions on the Dev.Opera site.

HTML5 Video is currently in the spotlight as an alternative to the widely used flash based video players used by YouTube and others for embedding and playing video on Apple’s iPad. HTML5 is still a draft specification so it doesn’t have full browser support and their is also the usual platform divergence on what video formats are supported. This hasn’t stop the main video hosting sites like YouTube and Vimeo from experimenting with HTML5 video.

One of the other reasons HTML5 video is gaining, despite the video format issues, is that it makes it easier for developers and users to embed and interact with video content.  So when I got a nudge to look at supporting twitter subtitles with Vimeo videos, exploring the HTML5 option was at the top of my list (and the fact that Vimeo allow longer videos greater than 10 minutes also makes it a viable solution of conference/lecture capture!). 

As it turns out a bit like the YouTube/JW Player solution most of the hard work is already done by tweaking the XML format used in BBC iPlayer and thanks to Bruce Lawson’s Accessible HTML5 Video example mentioned earlier.

So if you go to the twitter subtitle generator page you’ll see there is a new option to use a Vimeo HTML5 video and specify the video url e.g. Below is a screen capture I took of the process (the video I used for this demonstration was JISC’s Digital Content Quarterly Issue 1: Video 1 (Long Version)).

One of the issues I had was finding a clip and extracting a useful part of the twitter timeline. Either there weren’t enough tweets which made it look like the subtitles had stalled or there were too many (particularly when I tried using the #askthechancellors hashtag). The ability to filter a timeline, by for example displaying tweets from a selected group, has been raised by a couple of people, most recently in Brian Kelly’s Issues In Crowd-sourced Twitter Captioning of Videos post. Using the HTML5 Video solution and Daniel Davis’ multilingual example (also from the Dev.Opera site) it is easy to demonstrate how this feature could be implemented. I haven’t had time to work this feature into the ‘twitter subtitle generator’, but this page gives a live demo of a possible output.

So it looks like there is still some more interesting work to be done in this area …