Archive for the 'uTitle' Category

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 …

Twitter/YouTube commenting: Embeddable, open sourced and with its own WordPress plugin [uTitle]

Player embedPlayer embed with jump navigation

Having added embed options for the Twitter subtitling of live events (iTitle), it made sense to include these with the Twitter/YouTube commenting tool (uTitle). As both these tools have some code in common adding embed options for the player and player+navigation was relatively straight forward. So now you can embed Twitter commented YouTube videos in other sites.

But what about providing an interface to let people comment on videos from your own site? This is now also possible … kind of.

Using the same method for embedding the player with jump navigation <iframe>, it is possible to just make a bigger one which includes the whole of the screen. The issue I haven’t been able to resolve is that the user needs to authenticate via Twitter. This processes unfortunately breaks the user out of the <iframe>, before automatically redirecting back them back to the comment interface on My preference would be if a users is making a comment via uTitle embedded on that you stay on that site.

A possible workaround would be for to host their own version of the uTitle interface. So here it is the uTitle source code on github.

That just leaves the WordPress plugin. This was suggested by Dries Bultynck
in response to the original uTitle post. As I plan on using commentable videos on this blog it seemed like a good idea to put something together on this. So here it is the WordPress uTitle Plugin. This turns a custom shortcode into an embed/iframe.


is turned into …

Comments powered by Twitter Click here to add yours ...

which is nice

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 …

Convergence @youtube meets @twitter: In timeline commenting of YouTube videos using Twitter [uTitle]

Previously when looking at twitter subtitling of videos the focus has been on replaying the backchannel discussion with the archive video from live events. The resulting ‘Twitter Subtitle Generator’ has now been used to generate and replay the twitter stream for programmes on the BBC iPlayer (some iPlayer examples), the JISC 2010 Conference (See Searching the backchannel with Twitter subtitles) and more recently as a way to enhance lecture capture. The founding premise behind all these examples and the question originally posed by Tony Hirst was how to allow a user to experience and replay the synchronous channels of what was said from the stage, and what was said about what was said from the audience (physical and virtual). Having looked at synchronous communication I was interested to extend the question and look at asynchronous communication (i.e. what was said about what was said after it was said).

My first step has been to experiment with the use of Twitter for timeline commenting on YouTube videos. The idea of timeline commenting of media isn’t entirely new and has been a feature of audio services like SoundCloud for a while. Likewise I’m sure the idea of integrating with the Twitter service as a method of capturing comments has also been used (but for the life of me I can’t find an example- another project perhaps).

The result is a prototype tool I’m calling uTitle. How it works is best explained in the video below:

As can be seen in the video uTitle allows a user to make comments at any point in the video timeline. These comments are also captured and can be replayed and added to at a later point. The link below lets you try out uTile for yourself (the paint is still wet so if you come across any problems or have any feedback this is greatly appreciated – use comments below).

Click here to try uTitle (or here for an existing example)

Some notable points

A couple of features of uTitle worth highlighting. Firstly, as demonstrated by the example link above it is possible to directly link to a timeline commented video making sharing resources easier. Another important point is that because twitter comments for YouTube videos are aggregated by using the video id this makes it possible to use this data with other services (at one point I was considering short-coding the ids to make less an impact on the Twitter 140 character limit, but I wanted to make generated tweets has human readable as possible.

How it was done

For those of you interested here are a couple of the key development milestones:

Step 1 Indentify way to integrate with Twitter
I already knew Twitter had an API to allow developers to integrate with the Twitter service so it was a case of finding a head start on which I could build upon. As I do most of my coding in PHP I went straight to this section of the Twitter Libraries. Having tried a couple out I went for TwitterOAuth by Abraham Williams (mainly because it used OAuth and when I looked at the code I could understand what it was doing).

Step 2 Submit a form without page refresh
Something I’ve known is possible for a while but never needed. I knew I wanted to allow users to make comments via uTitle without refreshing the page and loosing their place in the video. This post on Ask About PHP was perfect for my needs.

Step 3 Jot down the pseudo code
This is what I wanted uTitle to do:

  • Get YouTube video id
  • If video id doesn’t exist as a notebook on Twapper Keeper make one
  • Else get results from Twapper Keeper for video id
  • Get results from Twitter Search
  • Merge data and remove duplicates
  • Generate XML subtitle file from results
  • Display interface page
    • On comment submit to twitter

Step 4 Put it all together
Some late nights pushing bytes across the screen …

These examples demonstrate how it is relatively straight forward to extract part of the Twitter timeline

Future development areas

Some quick notes on areas for further research/development:

Comment curation/admin – currently anything on the public timeline with a YouTube video is pulled in. A similar problem exists for the Twitter Subtitle Generator and it is something Tony and I have identified as a feature … but just haven’t had a chance to implement a solution. Part of the reason for developing the prototype is to start finding use cases (ie find out where the ship is leaking)

Merging synchronous with asynchronous – basically how can Twitter Subtitle Generator and uTitle be merged so comments can be collect post event (the issue here is there are two ways the subtitle timestamps would have to be generated and distinguishing what was said from what was said about what was said).

Other video sources – I’m primarily interested in how uTitle might work with BBC iPlayer (particularly as the latest developments are exploring social networks – as highlight by Tony).

Spamming your followers with comments – Interested to see if users are willing to use there main twitter account for generating comments.

Hmm I think I may have bitten off more than I can chew …


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