Archive for the 'iTitle' Category

Making ripples in a big pond: Optimising videos with an iTitle Twitter track

This post was originally published on the FOTE blog on the 1st November 2010

With 24 hours of video uploaded every minute to YouTube, your videos can quickly be lost within a sea of content. Not only this, but because videos have historically been difficult for search engines to catalogue, your drop in the ocean of content can become indistinguishable from everything else.

It’s not surprising therefore that the current kings of search and owners of YouTube, Google, announced that in March 2010 that video’s on YouTube would be auto-captioned. Whilst this announcement is pitched at improving accessibility for the hearing impaired, it also means there is wider accessibility in terms of how the videos are indexed and ultimately searched. Need proof? The following Google Search returns this video (which convenient also highlights the value of captioning videos for search engine optimisation).

But what if you have conference videos or other educational resources, like lecture capture, which isn’t on YouTube? There are a number of options to captions including: using standalone voice recognition software, various caption/annotation tools, professional captioning, or just sitting down and manually writing captions in a text editor. All of these potentially have a cost associated with them. If only there was a way you could crowdsource captions … hold that thought.

A well as the rise in popularity of video, conference delegates are increasingly using the micro-blogging service Twitter to share ‘What’s happening’ with other participants as well those further afield. For many this is becoming a valuable medium allowing the individual to find voice in a format which is usually dominated by whoever is standing at the front of the room. At the same time conference organisers are benefitting, from what is usually thousands of tweets, amplifying and raising the profile of the event.

The record of conference tweets is arguably a resource which is equally as valuable as any conference proceedings, papers, posters, videos, but the nature of a tweet means if not consumed in the moment then they can potentially loose context. And it is here that two worlds collide. Using what was said by the audience to caption a video of the presentation, contextualising ‘what’s happening’ with what happened.

The idea of Twitter Powered Subtitles for Conference Audio/Videos on Youtube was first proposed in March 2009 by Tony Hirst which presented a method for extracting conference tweets and creating a subtitle file for YouYube. Almost a year later in February 2010 the idea was revived in Twitter powered subtitles for BBC iPlayer which saw the publication of the online Twitter subtitling tool iTitle.

iTitle integrates with the JISC supported Twitter archive service Twapper Keeper to generate subtitle files in different formats as well as playing back video clips from different sources with subtitle overlays. Since March the evolution of this tool has been improved following feedback from users to incorporate features like backchannel filtering, embedding subtitled videos in other sites, and a RESTful interface.

A number of conferences have now enhanced their video archive with timed tweets  including the JISC Conference, ALT-C and the Institutional Web Management Workshop (IWMW). FOTE10 is the latest event to get the ‘iTitle’ treatment and links to the videos are contained below:

The hypothesis was that providing providing a twitter subtitle track would improve the discoverability of FOTE10 videos. Does it work? Well if anyone is ever searching for an “ed tech jackanory” there should be a happy ending.

iTitle: Full circle with Twitter subtitle playback in YouTube (ALT-C 2010 Keynotes)

ALT YouTube ChannelIn March 2009 Tony Hirst posted a solution for Twitter Powered Subtitles for Conference Audio/Videos on Youtube. A year and a half later, numerous evenings tweaking code, lots of support, advice and promotion from Tony, Brian Kelly and others, and we have come full circle. What began for me as a method to playback real-time tweets with the BBC iPlayer has returned to its origins, Twitter powered subtitles for a conference video on YouTube.

To date the examples of using the Twitter subtitling tool (iTitle), including Reliving ALT-C 2009 keynotes with preserved tweets, have focused on replaying externally hosted video content through this site using the JW Player. This method has allowed greater control over certain aspects like interface design and features like the timeline jump navigation. The disadvantage of this extra control is sustainability.

Whilst I’m very happy working for the RSC there will come the day when I move on, or this website might disappear altogether subsumed into another RSC system/service. If this were to happen there is no guarantee that iTitled videos would still be able to be replayed.

This issue has been at the back of my mind since the very beginning which is partly why from early on I made the iTitle code available for download (I should really update this version of the code). But there has been another solution which has been available since the very beginning but I’ve never had an example to demonstrate it. Just as Tony’s original post demonstrated how the SubRip (*.srt) subtitle file format could be uploaded as part of one of your YouTube videos, iTitle has had the ability to generate SubRip files almost since the very beginning.

So in August when I saw ALT had uploaded videos from ALT-C 2009 to their YouTube channel I thought it would be a great opportunity to amplify keynotes from this years ALT-C and highlight YouTube’s built-in subtitling tools. So after some idea dropping (via Twitter of course) and some follow up emails with Matt Lingard and other members of the ALT team you can now enjoy Donald Clark’s and Sugata Mitra’s keynotes with the ability to see what was said on Twitter in YouTube (links for these at the end of this post).

If you watch these videos via the YouTube site you might need to turn the subtitles on by clicking the ‘cc’ button in the playback toolbar. Annoyingly there doesn’t appear to be a setting for the video which forces captions to play every time, instead YouTube remembers your last choice, but captions can be forced on when a video is embedded. Here is the YouTube help for this feature.

A nice feature of YouTube’s implementation of subtitles/closed captions is their interactive transcript which has a navigable list of the subtitle track, highlighting the active caption. Hopefully YouTube will get around to providing some sort of filtering/search solution like the one used in iTitle’s timeline jump navigation.

Screenshot on YouTube showing subtitle navigation

If you would like to add a twitter track to you own YouTube videos, visit the iTitle tool and select to output in .srt format. This video then explains how to upload subtitle tracks to YouTube videos.

As well as hopefully enhancing the value of ALT’s of these resources to the viewer there is also an argument for doing this to make the videos more search engine friendly. For further explaination of this aspect you should read my guest post Making ripples in a big pond: Optimising FOTE10 videos with an iTitle Twitter track

PS For the ALT videos they wanted to filter out RTs. This was a long overdue feature for iTitle so it made sense to add it.

PPS I also didn’t know you could move the position of subtitles on YouTube videos by click and dragging them.

Click to see "Don't lecture me" - Donald Clark at ALT-C 2010 w/h Twitter track on YouTube“Don’t lecture me” - Donald Clark at ALT-C 2010 w/h Twitter track on YouTubeClick to view "The hole in the wall: self organising systems in education" - Sugata Mitra at ALT-C 2010 w/h Twitter Track on YouTube“The hole in the wall: self organising systems in education” - Sugata Mitra at ALT-C 2010 w/h Twitter Track on YouTube

Reliving ALT-C 2009 keynotes with preserved tweets

iTitle: Any flv/mp4 will doUnfortunately I won’t be able to attend ALT-C this year and will have to muddle on as a remote delegate, primarily surfing the conferencing twitter stream.

Brian Kelly posted about the Use of Twitter at the ALTC 2009 Conference last year and by all accounts if ALT are able to video stream the keynotes again combining these two channels should mean it will be practically like I am there (but without the lunch queue ;-).

In Brain’s original post I noticed he mentioned the Twapper Keeper service (perhaps his first mention on this on hos blog) and that he had created a notebook for #altc2009. Having missed Martin Bean and Terry Anderson’s keynotes and wanting to gear myself up for ALT-C 2010 I thought I’d see if I could relive the keynotes with the preserved twitter stream using iTitle.

Knowing the twitter archive was available the next step was to see if I could find the video. On the official ALT-C 2009 keynotes page I saw they had the videos hosted on Unfortunately this wasn’t one of the video hosting sites currently supported by iTitle. This isn’t the first time I’ve had this problem as I had to manually tweak the pages for the JISC10 Conference Keynotes with Twitter Subtitles. Rather than having to keep tweaking pages I thought a simple solution would be to just let the user define a url for where a video is hosted (which works well with blip as they give direct links for videos in .flv and .mp4 format). So here are the videos with tweets (NB the jump navigation only works for loaded parts of the video)

Martin Bean
Vice-Chancellor of the Open University

iTitle: Martin Bean’s Keynote | Martin Bean’s Keynote

Michael Wesch
Assistant Professor of Cultural Anthropology at Kansas State University, USA

iTitle: Michael Wesch’s Keynote | Michael Wesch’s Keynote

Terry Anderson
Professor and Canada Research Chair in Distance Education at Athabasca University, Canada - Canada’s Open University

iTitle: Terry Anderson’s Keynote | Terry Anderson’s Keynote

Give it a REST: iTitle/uTitle linking (oh and you can comment on Vimeo vids in uTitle)

give it a rest
give it a rest
Originally uploaded by clayworkshop

In Brian Kelly’s Captioned Videos of IWMW 2010 Talks post last month he had three suggestions for improvement: searchable collections; a ‘RESTful interface’ to link to specific tweets in the video; and better cross browser support.

In my last post on iTitle I highlighted 97% of desktop web browsers can now enjoy iTitle Twitter Subtitling – Vimeo edition. With one down I thought I would have a look at providing some additional ways to link to specific parts of captioned videos.

So first filtering tweets. I’ve added an optional url parameter ‘q’ which can be used on both iTitle and uTitle. So to link to Chris Sexton’s ‘odd feeling’ is

If you try this link you’ll see the list of tweets is filtered, which is great, but … clicking on it doesn’t always jump to the appropriate part of the video. This is a limitation of the JW Player and Vimeo videos which isn’t able to jump to parts of the video which haven’t been buffered yet (not a problem for YouTube video mind you because the way they are served is different).

Another addition to both YouTube clips on iTitle and uTitle is another options to set a ‘start’ time (hh:mm:ss) within the link url (this was suggested by Dries Bultynck when uTitle was launched). So to cue the uTitle video on Using YouTube for audio/video feedback for students at 3 minutes would be

So I think this ticks off the ‘RESTful interface’ for iTitle and uTitle.

In a follow-up post by Brian (Twitter Captioned Videos Gets Even Better) there was a useful discussion started by Anthony Leonard about whether the lag between a tweet being sent and what was being said in the video clip was distracting. As there are a number factors which can effect the amount of time between starting to type a tweet and hit the send button synchronising both streams isn’t easy.

Tony Hirst’s then commented that the auto-mark feature he suggested for uTitle which timestamps a tweet as soon as you start typing could be modified for a ‘live event tweeting’ client. This got me thinking:

Once I include Vimeo support for uTitle you could upload a blank video which is say 90 minutes long. Load up the video in uTitle and when the session starts hit play. Then use the uTitle interface for making tweets (the Tony Hirst patent pending auto-mark feature creating timestamps when the tweeter starts typing).

Once you are done uses Vimeo’s feature of being able to replace existing videos to swap the blank video with the actual video of the event which will have the same video ID.

At this point you could either parse out the results into iTitle using the csv import feature or even cooler distribute a link to the uTitle clip so that other people can add their own comments.

[I know what I'm going to be doing tonight ;-)]

It took more than one night but uTitle now also supports Vimeo videos. I wonder if this method will be used for IWMW11 …

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

Originally uploaded by RLHyde

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

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 …

Twitter subtitling, the three E’s: Embed, embed, embed

downloadA conversation with Brian Kelly led to a quick refresh of the Twitter Subtitle Generator (iTitle) [I’ve got tired of linking to all of mine and Tony’s previous posts on this so started the Twitter subtitling wikipedia entry].

Brian was interested in using iTitle to create twitter captioned versions of videos from IWMW10. Their plan was to use Vimeo to host the videos as it allows upload of videos greater than 10 minutes. This led me to update the iTitle code to include the timeline jump navigation which I originally developed for YouTube videos.

Whilst doing this it occurred to me that I should really get around to providing a way for users to direct link to the results page (something I had been meaning to do from the very beginning). What this means is if you are using the iTitle for in-browser playback of subtitled YouTube or Vimeo videos you can share the results with a direct link. So for example you can see Brian’s open address for IWMW10 at or the Google I/O 2010 Android Demo at 

More importantly I thought it would also be useful to include the ability to embed the results in other websites. With the introduction of the timeline jump navigation using the typical <embed> code you see with YouTube video isn’t possible (also I’m also using the HTML5 version of Vimeo videos which also doesn’t <embed>).

I’ve instead opted to automatically generating some <iframe> code which is included in the display/result page. So using Brian’s speech again as an example the resulting code generated to embed the video in your own website is:

<iframe style="border-bottom: medium none; border-left: medium none; width: 470px; height: 570px; overflow: hidden; border-top: medium none; border-right: medium none" src="" frameborder="0" allowtransparency="allowtransparency" scrolling="no"></iframe>

which gives:

To display just the video player with twitter subtitles I was able to <embed> code for the YouTube videos as they are Flash based. The JW Player which I use for playback has a ‘viral plugin’ which can generate the embed code (and send email links). A big plus point is that it preserves the link to the Twitter subtitle file. The player only version of Vimeo uses <iframe> again. With all these embed options I leave it to the author to decide if they link back to the original.

An update on YouTube/Twitter commenting (uTitle) coming soon …

Google I/O 2010 – Keynote Day 2 Android Demo with Twitter Subtitles

Update 1: This post is a bit techie. If you want to jump straight to the action click here to see the full 45 Google I/O 2010 – Keynote Day 2 Android Demo with  Twitter subtitles

Update 2: When I was pushed the twitter timeline through the generator I noticed there were a number of tweets which weren’t in English so I’ve now passed the results through the Google Translate API. Click the same link above to see the result.

Update 3: Some inline updates: extra tweet filtering and inclusion of .csv upload to twitter subtitle generator.

Originally I was more interested in mashing the Google I/O Android Keynote with Twitter subtitles because I could, but the process was useful in highlighting some areas for further development. The first is something Tony and I have discussed before is a way to curate the twitter timeline to sort the wheat from the chaff. For the Google I/O presentation I downloaded the archive in .csv format from Twapper Keeper and ‘tweaked it’ in Excel filtering for tweets meta tagged as EN (English) which took it down from 5420 –> 4638 tweets in 45 minutes (not surprisingly the majority of Twitter users ignore the language setting leaving it as the default despite the language they tweet in). Then filtering ‘retweets’ by removing ‘RT’s which took it from 4638 to a more manageable 3124 tweets. Update: I also noticed that a number of tweets had exactly the same timestamp so I filtered these out leaving 1790 tweets.

Having got this far it then highlighted the next issue, converting the truncated csv file into a timed text XML format. Previously I’ve shown how you can Convert time stamped data to timed-text (XML) subtitle format using Google Spreadsheet Script and could have easily gone down that route again but wanted to try something new. As the Twitter Subtitle Generator already integrates with the Twapper Keeper service it seemed a small step to get the tool to read a csv file rather than the Twapper Keeper feed. This was made so much easier by a PHP function which returns a multi-dimensional array from a CSV file optionally using the first row as a header to create the underlying data as associative arrays – sweet!

For once my code was clean enough that I could drop this function in and point it the the csv file I created. I haven’t worked this functionality into the ‘generator’ yet but at least it is another piece for the jigsaw. Update: couldn’t resist – added functionality to upload csv for subtitling.

So below is a short demo of the output. Click here to see the full 45 minute presentation with Twitter subtitles

What they were saying: Leaders debate on BBC iPlayer with twitter subtitles from parliamentary candidates

Screenshot of BBC iPlayer with twitter subtitles Since February my post on Twitter powered subtitles for BBC iPlayer has remained in my top 5 posts and I’ve been meaning to revisit the iPlayer platform with another twitter subtitle example. The general election ‘Leaders Debates’ seemed like an ideal event to experiment with the format. It became very apparent after the first debate that simply pulling the public timeline into the twitter subtitle generator wouldn’t work as with an average of ~30 tweets per second the public discussion would just be a blur.

With the increasing popularity of twitter (and other social platforms) to comment on live events there is probably a separate research strand looking at intelligent filters, instead I’ve gone for a more basic approach. Fortunately the good people at, who have been closely monitoring the election using twitter sentiment, were able to provide me with a data file of twitter comments made by MPs and party prospective parliamentary candidates being tracked on twitter during the debate. Using the Convert time stamped data to timed-text (XML) subtitle format using Google Spreadsheet Script I was able to generate a subtitle file compatible with BBC iPlayer. Below is a short demonstration of the twitter subtitles in action followed by instructions to see the entire debate.

So if you would like to see what some of the parliamentary candidates were tweeting during the last leaders’ debate follow these steps:

  1. Download the The Prime Ministerial Debates from BBC iPlayer
  2. The broadcast you download from iPlayer will be stored in a folder (something like My Documents] > [My Videos] > [BBC iPlayer] > [repository] > [b00s6lf7]), locate this folder and replace the file ‘b00s6lf7_live.xml’ with this one (keeping the obscure file name ie b00s6lf7_live.xml.
  3. When you replay the broadcast turn subtitles by clicking the ‘S’ button to see the tweets.

Presentation: Twitter for in-class voting and more for ESTICT SIG

Today I presented some of my work on twitter voting to the Engaging Students Through In-Class Technology (ESTICT) special interest group. This group “is a UK network of education practitioners and learning technologists interested in promoting good practice with classroom technologies that can enhance face-to-face teaching.”

I used this slot as an opportunity to try out some some presentation techniques. The first was using Timo Elliott’s PowerPoint auto-tweet plugin which allows you to automatically tweet notes as you work through the slide deck. The plan was that this would provide ready made links and snippets for re-tweeting, favouring or just copying into a users personal notes. I also did this to generate information to twitter subtitle my presentation. An unforeseen benefit was that the tweets provided a stimulus for further discussion after the presentation.

The other technique I picked up from was from a presentation by Tony Hirst in which he included links to secondary resources by only displaying the end of a shortened url. This is demonstrated in the presentation (with twitter subtitles of course ;-) (the link also contains a recipe for lecture capture enhancement):

ESTiCT Presentation link

Searching the backchannel with Twitter subtitles

Pair programming is an agile software development technique in which two programmers work together at one work station. One types in code while the other reviews each line of code as it is typed in. The person typing is called the driver. The person reviewing the code is called the observer (or navigator). The two programmers switch roles frequently (possibly every 30 minutes or less). From Wikipedia

Regular followers of the twitter subtitle story will be aware that this idea has been bouncing back and forth between myself and Tony (here are some of his posts). While we don’t have a true ‘pair programming’ relationship the dynamic is very similar. So when Tony posted a method for deep search linking a twitter caption file using Yahoo Pipes it was time to hit the driving seat for some evening coding.

Using the other Martin’s presentation again I’ve put together this page which demonstrates twitter caption search and timecode jump (I should point out that limitations of the JWPlayer means jumps can only be made to portions of the video which have already been buffered).

Twitter subtitle - search and timecode jump

How it was done

Taking the JWPlayer used in the previous post I dropped it onto a page also pasting the subtitles from the XML file. With a bit of CSS styling and using A K Chauhan’s JavaScript List Search using jQuery the pasted xml can be filtered, and using the JWPlayer JavaScript API you can jump to the related part of the video. When I get a chance I’ll integrate this functionality into the twitter subtitle generator. Update: Breaking my ‘no coding in office hours’ rule this feature in now enabled for the ‘YouTube with Tweets’ option of the twitter subtitle generator

Some thoughts

Historically one of the issues with audio/video content is the ability to search and deep link to content. This is changing most notably with Google/YouTube’s auto captioning of videos, but as Tony pointed out in his last post there is still some ways to go. Providing a contextualised and searchable replay of the backchannel with what was actually said potentially opens up some interesting uses. With a number of universities exploring the use of lecture capture there is potentially an opportunity to enrich this resource with the backchannel discussion. In particular I’m thinking of the opportunity for students to learning vicariously through the experiences and dialogue of others. Before I go all misty eyed the reality check is twitter isn’t that widely used by students (yet), but surely this is a growth area.


This blog is authored by Martin Hawksey e-Learning Advisor (Higher Education) at the JISC RSC Scotland N&E.

JISC RSC Scotland North & East logo

If you would like to subscribe to my monthly digest please enter your email address in the box below (other ways are available to subscribe from the button below):

Subscribe to MASHe to monthly email updates


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: Webthumb

The MASHezine (eBook)

MASHe is also available in ebook and can be downloaded in the following formats:

Visit to manage your subscription


Opinions expressed in this blog are not necessarily those of the JISC RSC Scotland North & East.

JISC Advance Logo

JISC Advance is a new organisation that brings together the collective expertise of established JISC services:

For further information visit

Creative Commons Licence
Unless otherwise stated this work is licensed under a Creative Commons Attribution-ShareAlike 2.5 UK: Scotland License