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. http://vimeo.com/8570975. 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 …

Last updated by at .

0 Responses to “Twitter subtitles on Vimeo using HTML5”


Comments are currently closed.

About

This blog is authored by Martin Hawksey Google+

JISC CETIS Learning Technology Advisor (OER Programme Support)
jisc cetis logo

The MASHezine (tabloid)

It's back! A tabloid edition of the latest posts in PDF format (complete with QR Codes). Click here to view the MASHezine

Preview powered by:
Bluga.net Webthumb

The MASHebook

You can also download this post as:

Subscribe to monthly email digest of posts

Loading...Loading...


Subscribe to per post email updates

Enter your email address:

Delivered by FeedBurner

Copyright License

Creative Commons Licence
This work is licensed under a Creative Commons Attribution 3.0 Unported License. CC-BY mhawksey

Privacy /Cookies

This blog uses Google Analytics (which makes use of 'cookie' technologies) to provide information on usage. Here's an overview of Google Analytics Privacy and how to opt-out (other 3rd party services like Twitter might also be tracking you via this site, but as far as possible I try and prevent this by removing official tweet buttons).

Badges

. . .