97%* of desktop web browsers can now enjoy iTitle Twitter Subtitling – Vimeo edition

Having spent a couple of nights crunching code it’s time to catch up with some paperwork. Since writing about the iTitle updates in Twitter subtitling, the three E’s: Embed, embed, embed Brian Kelly has followed up with a couple of posts (Captioned Videos of IWMW 2010 Talks and Twitter Captioned Videos Gets Even Better) highlighting some of the benefits of iTitle, experiences of using the service and some ideas for future development.
Having other people using iTitle is incredible useful as it adds some participatory design to the development of the tool. It’s also been great to have Tony Hirst point out some useful tips and tricks. More about those later.
So first up …
Vimeo gets cross browser support with flash-based player playback.
In March after I managed to get in-browser playback with YouTube videos Paul Hadley from Just Blogging contacted me and asked if something similar was possible with Vimeo. At the time I briefly tried getting them to run through the flash-based JW Player which was used with the YouTube vids but couldn’t get it to work. I probably gave up too early, instead being lured into playing with Vimeo’s beta HTML5 output. It was a great opportunity to learn about the possibilities of HTML5 video and emerging formats for subtitles, of course not forgetting about the joys of video codecs. Many a blog post has been written on HTML5 video and I won’t get into that here, the bottom line being the h.264 codec used by Vimeo is only available in a handful of browsers.
IWMW10 was a great stimulus to have another look at using Vimeo’s existing flash-based video. Had I done a bit more digging around back in March I probably would have come across Andrew Beveridge’s code posted on the JW Player forum. This code is able to convert a Vimeo video ID into a url for the source .mp4 file which can be played in the same JW Player used for YouTube content. This is a big step forward as it means Vimeo’s excellent hosting service, which even with a free account allows videos over 10 minutes, can now be mashed-up with Twitter content and available for viewing in *97% of desktop web browsers. Now that’s got to strengthen its use to enhance conference archives.
Next …
Twitter authentication for user protected archives
Before IWMW10 Brian asked if there were any ‘gotchas’ he should be aware of with iTitle. I couldn’t think of any but it wasn’t long before Brian came up with one.
The way I setup iTitle for the in-browser video playback with subtitles was to created a cached copy of the XML caption file using the video ID as an identifier/filename. The problem here is that anyone could come along later and recreate a completely different subtitle file for the same video overwriting the original. I’ve been able to write protect Brian’s hard work my changing the file permissions on the server but this model isn’t sustainable.
What I’ve decided to do is allow a user to login to iTitle via Twitter using the same TwitterOAuth code used in uTitle. When they are logged in their Twitter user ID is then used to create a unique subtitle files which only they can overwrite. For example below is a version of one of the IWMW10 talks I created with just tweets from the @iwmwlive account (I did this by downloading the Twapper Keeper archive for #iwmw10 in .csv format and filtering the results in Excel, exporting as a .csv again then selecting this as the source in iTitle):

The Web in Turbulent Times – Chris Sexton (with tweets from iwmwlive)

Finally …
Pulling video meta data using oEmbed
This one came from a tip from my partner in crime, Tony Hirst. After the ‘embed, embed, embed’ post Tony passed me a link to the oEmbed site. oEmbed is an open format implemented by a number of media hosting sites which makes it easy for 3rd parties to embed content with a single link. So for example if I included a url to a YouTube video if your site had the right plugins it could convert this into a playable version of the clip.
I think when Tony was suggesting oEmbed he was thinking that I could expose an API for the iTitle site which would make it easy for people to embed the results on their site with a single url. As I’m not aware of many 3rd party sites that use oEmbed yet for embedding content it’s lower down my to do.
iTitle content with information from VimeoInstead I thought it would be an opportunity to grab some meta data from either YouTube or Vimeo to include with the iTitle content. I’ve kept it quite basic so all I’m doing is pulling the video title and author. The main reason I wanted to do this was to add some meaningful tracking data to my Google Analytics (another tip Tony had which I haven’t implemented yet is Tracking YouTube Embedded Player Plays with Google Analytics)

Things still to do

Brian had some useful suggestions for further development including: searching for tweets across a collection of videos; and a RESTful interface to link to specific parts of a captioned video. The searching across a collection interests me the most and with enabling Vimeo content in JW Player this opens opportunities to use more of the player’s built-in features like playlists and clip control.
The other thing on my mind is the YouTube video timeline commenting tool, uTitle, could easily be extended to include Vimeo. Which leaves the question where will all this end …