1 Comment

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


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.


Last week saw he return of the JISC conference. As with other similar events the organisers explored a number of ways to allow delegates to experience the conference virtually as well in person. The main avenues were video streaming some of the sessions live across the web; the inclusion of a Ning social network (I’m guessing they won’t be doing this again next year. See Mashable’s Ning: Failures, Lessons and Six Alternatives); and advertising the #jisc10 hashtag for use on twitter, blogs etc. I would recommend Brian Kelly’s Privatisation and Centralisation Themes at JISC 10 Conference post which presents some analysis and discussion on the effectiveness of each of these channels.

It is apparent that the JISC conference mirrors a wider emerging trend to allow dispersed audiences to view, comment and contribute to live events. A recent example is that of the #leadersdebate broadcast on ITV, which as well as having over 9.7 million views generated over 184,000 tweets (from and numerous other real-time comments on blogs and other social network sites.

I didn’t have a chance to attend the conference myself and other things meant I was unable to see the live video streams, although I was able to keep an eye on the twitter stream. Fortunately the conference organisers have made thevideos of the keynote speeches by Martin Bean and Bill St. Arnaud available. It is however difficult to replay the video with the real-time backchannel discussion. Cue the twitter subtitle generator, which I've been exploring through various posts. So if you would like to experience the live video/twitter experience some I’ve embedded the videos below.

Opening Keynote: Martin Bean, Vice Chancellor, The Open University

This text will be replaced
Subtitle content provided by twitter | Download the XML subtitle file

Closing Keynote: Bill St. Arnaud, P. Eng. President, St. Arnaud-Walker and Associates Inc.

This text will be replaced
Subtitle content provided by twitter | Download the XML subtitle file

Here are Martin Bean’s and Bill St. Arnaud’s biographies and keynote slides. Both of the video’s were produced by JISC and distributed under Creative Commons.

Just a quick couple of words on the subtitle file generation. I had planned to use the archive of tweets provided by Twapper Keeper for both keynotes, but there was a 45 minute hole in the archive between 08:44 and 09:27GMT for the first session, which is being investigated, so I used the Twitter Search instead. As the session was early in the morning and twitter limits searches to 1500 tweets I had to modify the query to '#jisc10 -RT', which removes retweets, to get results for all of Martin Bean's presentation (he still has a healthy 372 original tweets during the course of his presentation. [There is perhaps an interesting way to visualise RT's in the subtitle file to indicate consensus tweets - for another day]

If you are planning to run your own event and would like to create a twitter video archive here are some basic tips:

  1. Make sure you advertise a hashtag for your event
  2. Before the event create a hashtag notebook on twitter archive service Twapper Keeper – there are other archive services but currently the subtitle tool only integrates with this one
  3. Make sure video is captured in a reusable format. The video above is played back with the JW Flash Video Player which supports FLV, H.264/MPEG-4, MP3 and YouTube Videos. Generated subtitle files can also be used directly in YouTube (if you own the video). I’ve also experimented with Vimeo for longer videos.

If you would also like a ‘at the scene’ report of the keynotes and some of the plenary sessions you should read this post by my colleague Lis Parcell at RSC Wales - Technology at the heart of education and research: JISC10 conference report

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 …


I’ve been quietly snaffling twitter timelines using the subtitle generator I created. The latest one was prompted by Brian Kelly’s post on the The “Building Britain’s Digital Future” Announcement. In this post he mentioned that twitter was a buzz with the #bbdf hashtag.

Clicking on the image below will take you to a page I created from the subtitle generator. Because Number 10 use a commercial company to host some of their content, using a bespoke flash player, I create a page and embed the video and used the Javascript SMIL Browser.

Twitter subtitles for the Digital Future Speech

Update: As well as being 'Fun, intriguing..' Brian Kelly has a nice post on the 'Issues In Crowd-sourced Twitter Captioning of Videos' (which despite the title I read as a positive use of tweets as they are contextualised with an event). Tony (who inspired me to look at this area) and I are both keen to take some of the twitter captioning ideas forward so if any developers or funders want to get involved we'd like to hear from you.

Update: If you want to see how I combined Gordon Brown's speech and tweets here is the 'making of' video

Update: Number 10 have put Gordon Brown's speech on YouTube which makes embeding subtitles a lot easier. Click here to see the same example but using the YouTube clip

“Stimulating and supporting innovation in learning” this is the strap-line for the JISC Regional Support Centres and you can see its influence in all the work we do to support the sector from projects like EduApps, to advice like creating accessible e-book for free and to events like ‘Stepping into the Future’ which is looking at games based learning in building and construction.

Occasionally at the RSC we like to take you to the extreme, to the very edge of what technology currently offers in the enhancement of teaching and learning. An example of this comes from the RSC Scotland North & East Higher Education blog (MASHe), which recently presented a method for replaying twitter discussions within the BBC iPlayer. The video below shows a sample of the result in action:

This example builds on work by Tony Hirst at the Open University who has developed a number of solutions for adding captions to YouTube videos from tweets and complements work by the BBC on Subtitles + Internet = Advanced TV and is a demonstration of how back-channel communication, like twitter, could be re-used for content enhancement. 

The post has generated a flurry of interest in both education and media including a comment from ‘Auntie’

Click here for Twitter powered subtitles for BBC iPlayer


Twitter Subtitles in BBC iPlayer Since my first post on Twitter powered subtitles for BBC iPlayer Tony Hirst has put together another interesting post presenting a method for curating supplemental content for students using his DeliTV. Tony finishes his post commenting that it would be useful to see how timed text could be used to supplement radio broadcasts with either embedded subtitles or a standalone player.

In my original post I mentioned that I tried the smilText JavaScript engine without any success. I also had a looked at how radio broadcasts are delivered via BBC iPlayer. As the majority aren’t available for download and the BBC are phasing out RealAudio next month (RealAudio can be synchronised with RealText for captioning) these were also dead-ends (I did however come across iPlayer Converter which is useful if you “want to be able to access BBC Radio programming but can't use the iPlayer”). I also had a look at Tony’s suggested Accessible HTML5 Video with JavaScripted captions, again a dead-end without converting audio into a compatibly format.

Having exhausted these other avenues I decided to have another look at the smilText JavaScript engine again and guess what I got it to work! So as well as adding a real-time twitter player it made sense to add some other additional features below:

And here is the link to the tool:

*** Twitter Powered Subtitles Tool ***

How I got it to work

So what did I do wrong? Quite a bit as it turns out:

  1. Didn’t import all of the scripts for the JavaScript SMILText Player. In my defence the official documentation was a little missleading.
  2. Understanding the SMILText schema (need a <tev> before a <clear>???)
  3. Using closing tags like this <tev /> instead of <tev></tev>. Don’t know if this was because of the DOCTYPE was wrong or the way the JavaScript parsed the document.
  4. smilText JavaScript engine doesn’t appear to implement hh:mm:ss ClockValueSyntax

Observations and further development

It is worth noting that smilText JavaScript engine doesn’t appear to automatically wrap on white-spaces. I don’t no if this is a limitation of the engine or the SMIL language. I also wanted to keep <a> tags in browser playback but this doesn’t appear to be part of SMIL 3.0 smilText.

How this tool/concept be further developed? The playback browser is very basic but could be easily enhanced with some TLC. The smilText JavaScript API has some useful methods which could easily be exploited. There is also the question of how this tool could be integrated into other services like Twapper Keeper, (which is used by boxee and others) or FanHubz.

As always the source code is available here for further development.


The Virtual Revolution Banner

Following on from my post on Twitter powered subtitles for BBC iPlayer below is the subtitle file for the latest episodes. More information on the series is available from The Virtual Revolution website.

  • The Cost of free Sat 13 Feb 2010 @ 21:15 | Subtitle file (search term: '#bbcrevolution -watching')
  • Homo Interneticus Sat 20 Feb 2010 @ 20:15 | Subtitle file (search term: '#bbcrevolution -watching -RT)

To use these files follow these steps

  1. Download episode from iPlayer
  2. Locate downloaded folder for the episode (default for PC it is [My Documents] > [My Videos] > [BBC iPlayer] > [repository] > [obscure-broadcast-folder-name-like-b00qx4t0]
  3. Replace the file which ends '_prepared.xml' with the one download above using the same obscure file name ie b00qx4t0_prepared.xml.
  4. Start the clip in iPlayer pressing the ‘S’ button to turn subtitles on/off.

If you would like to create twitter subtitle files for other BBC programmes available for download on iPlayer you can use the link to the tool below:

Click here to create twitter subtitles
for other BBC iPlayer downloads