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 http://www.rsc-ne-scotland.org.uk/mashe/utitle/. My preference would be if a users is making a comment via uTitle embedded on www.yourweb.com that you stay on that site.
A possible workaround would be for www.yourweb.com 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.
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 http://www.rsc-ne-scotland.org.uk/mashe/ititle/v/id/13314385/ or the Google I/O 2010 Android Demo at http://www.rsc-ne-scotland.org.uk/mashe/ititle/u/id/IY3U2GXhz44/
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="http://www.rsc-ne-scotland.org.uk/mashe/ititle/v/id/13314385/" 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 …
I was recently asked to identify some free embeddable web services which could be used in a website to support students considering articulation/progression routes from further to higher education. In particular they were interested in producing a visually appealing timeline which allowed students to see key dates, linking to additional resources. Below is a quick screencast I put together of 6 web services which might be of interest and where possible examples of their use in existing educational sites:
Timeline
Timeglider is a free service for making embeddable timelines. Here’s an example of a Timeglider timeline (clicking on timeline items allows you to link to other resources). This tool uses specific date ranges but you could get around reprogramming it each year by setting it around 0AD or 1900.
Calendar
Google Calendar is embeddable calendar. This could be used in a similar way as the timeline tool but is less visually attractive. Unlike Timeglider key dates could be set as reoccurring so once created there could be minimal updates required. The advantage of Google Calendar is it automatically generates links which when clicked offer to be included in the students calendar software, if it is compatible. Example of embedded calendar at the Wittenburg University
Noteboard
Wallwisher is a online interactive notice board. There are potentially two ways you could use this: as a constructed noticeboard made by staff linking to resources, highlighting important information (a variation on the timeline idea). Alternatively as the University of Central Lancashire TAG site use it, as a method for getting feedback from students.
Online chat widget
Meebo is a chat widgetused by a number of libraries in the region (and further afield). This allows a visitor to chat with a staff member via a little instant messaging window. An example of this can be seen on the QMU library site ‘Ask us’. (Along similar lines there is another embeddable video chat service call Tokbox)
I recently read Tony Hirst’s onFormSubmit – Raising Web Scale Events in Google Spreadsheets post which highlights opportunities with the new event triggers (the ability to trigger scripts on events like form submit or time-driven like every x minutes) and was blown away by the possibilities. My first thought was to re-examine my event booking spreadsheet but when I saw the twitter conversation below between Brian Kelly and Tony (psychemedia) I saw something better to do – a Google Spreadsheet which could capture and report the daily/weekly twitter activity from an event hashtag .
In summary the script is designed as a way to automatically pull daily or weekly results from twitter, summarise them and push an update via email. The spreadsheet also keeps a copy of the sampled tweets which could be used for further analysis down the line but I would recommend you only use this as a backup for a separate twitter archive on Twapper Keeper. There are also a number of other services which are probably better for more in-depth post analysis of event hashtag communities like Andy Powell Summarizr or Tony Hirst’s Yahoo Pipes for Personal Twitter Networks in Hashtag Communities.
While the spreadsheet was created to monitor event hashtags it could easily be modified for other applications. For example, I’m sure it could be easily modified to collect continuous student with twitter (as highlighted by AJCann). Also, it doesn’t have to be limited to Twitter results, the same framework could be used for other XML and HTML data.
How it was done
As always I like to document how it was done. The rough process of the script is:
Open spreadsheet by ID (required when using event triggers)
Copy the TMP sheet giving it the script execution date/time as a name
The TMP sheet also has some useful formula’s worth highlighting.
H2 – ‘=UNIQUE(E2:E)’ creates a list of the authors removing duplicate entries.
I2 – ‘=EXPAND(ArrayFormula(IF(ISBLANK(H2:H), "", COUNTIF(E2:E,H2:H))))’ for every unique author in column H the formula count the number of times there name appears in column E
A2 – ‘=SORT(H2:I, I2:I, FALSE)’ sorts the values in column H (author names) by column I (the number of occurrences)
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).
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 post is probably less about creating a Twitter out of office service and more about an illustration of the power of Yahoo Pipes (and embedding flickr images with notes), I’ll let you read and decide]
Whilst the majority of twitter users will probably never need to setup a email style ‘out of office’ messaging service to respond to ‘@replies’ because they are never that far away from their timeline, I sure there are emerging cases where certain twitter accounts might need this feature. In particular, I thinking of something like a class twitter account is being used to send notifications (you might like to read this post on free SMS broadcast via twitter), curate discussions or one of the many other ways you can teach with twitter (compiled by Steve Wheeler).
In this scenario we want to respond to ‘@replies’ (tweets directed at you from other users), with a message to indicate that your won’t be able to immediate respond. I did a quick ‘Google’ to find if anyone had setup a ‘Twitter – Out of Office’ service and couldn’t see anything (which probably suggests no-one needs this service or they just haven’t thought of it yet).
Starting with the Twitter Advance Search you’ll see there are a number of options to search for tweets based on keywords, people referenced and dates (as well as some other options). So it is very easy to setup a search which will filter messages sent to a user between dates, tweaking to remove tweets which might include RTs or via. Here is an example which ignores RT and via to mhawksey since 29th May until 29th May (twitter search is limited to the last 7 days so if you are trying this after the 5th June you won’t see any results, but hopefully you get the idea).
So it is easy to setup a search which can identify possible messages you might want to send an out of office response, but how can we use this information? The key is that Twitter provides a feed for the search query. That is it provides the data for the search results in a machine readable format, RSS.
The next step in to use the data from twitter to generate a response message. The best service I know to do this is Yahoo Pipes. Pipes is a free service which provides an nice graphical interface for manipulating data like RSS.
Below is a screenshot of a pipe output I’ve created which takes a twitter username, date range and custom response message and manipulates it to produce a unique response message.
The final step is to get your twitter account to send the ‘out of office’ message. This is where RSS comes to our rescue. As well as Yahoo Pipes being able to manipulate RSS it can also output in this format as well. By copying the ‘Get as RSS’ from after you run your pipe you can use this with one of the RSS to Twitter services (currently I use either twitterfeed.com or the ‘Publicize –> Socialize’ option in Feedburner). It will look something like:
When setting this up choose to tweet ‘Title only’ and untick ‘include link’ or ‘post link’. Once you’ve created your RSS to twitter service you can also reuse it for future holidays. To save you going back through running the pipe you can just edit the feed url with new start and finish dates.
Hopefully you get the idea of what is possible. If you are interested in more ‘Pipe’ manipulations I would recommend having a browse through Tony Hirst’s offerings.
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.
At the beginning of the year in the ‘A real-time education (etherpad, mindmeister and cacoo)’ I made a prediction that there would be a lot more real-time collaboration tools/web applications. At the time I mentioned that the real-time collaborative word processing tool Etherpad had been bought by Google and the original etherpad.com would be disappearing at the end of March. The reprise has been extended as noted in this Transition Update and as the code is open source a number of other sites have popped up which clone etherpad’s original functionality.
It looks like Google have deployed the old Etherpad team to take a look at the Google Docs suite recently announcing a number of improvements to Google document and spreadsheet, which includes character-by-character collaboration. Another big addition is a new standalone collaborative drawing editor. This is similar to Cacoo but without as many features. The big advantage of Google’s editor is it is a single sign on and allows pasting into other Google Docs using the web clipboard. One final addition worth mentioning is the extension of the sidebar chat from spreadsheet to documents and drawing. The video below gives a demonstration of the new features.
I’m sure a number of institutions who have already signed up to Google Apps will be rubbing their hands with the addition of this functionality to all their students. If you would like to try out these new features yourself Google are phasing the changes in but you can opt to start using them now by opening selecting http://docs.google.com/settings,clicking the Editing tab and checking ‘New version of Google documents’.
A final thought, and one I’m sure a number of commentators have picked up on, with Google’s work in indexing the web, print/journals (Google Books and Scholar) and even video/audio (YouTune auto captioning) it seems it is only a matter of time before they integrate plagiarism detection tools into Google Docs.
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:
Real-time twitter playback using smilText JavaScript engine
So what did I do wrong? Quite a bit as it turns out:
Didn’t import all of the scripts for the JavaScript SMILText Player. In my defence the official documentation was a little missleading.
Understanding the SMILText schema (need a <tev> before a <clear>???)
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.
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, opensubtitles.org (which is used by boxee and others) or FanHubz.
On demand television like the BBC iPlayer has changed the TV habits of many users. Instead of waiting to tune into the live broadcast views can download and watch programmes at a time of their choosing and on a range of devices. Another media revolution has been status update/social networking sites like twitter. Ever wanting to engage with the listeners twitter is becoming the new ‘phone-in’ or ‘SMS text your thoughts’ for broadcasters. Whilst in the general populous there is still uncertainty over the benefits of sites like twitter broadcasters are already exploring how this technology can be used. A case in point in the BBC/Open University The Virtual Revolution series which is exploring how 20 years of the web has shaped our lives. Its not surprising that a programme of this ilk is exploring how technology can be used to support the broadcast (including allowing viewers to mash-up and reuse clips from the series), it is also the first programme that I’ve seen broadcast a hashtag within its opening credits. The hashtag is a community driven invention which allows comments and content to be tracked across the web including in comments made as tweets.
I find watching the programme with this backchannel communication is entertaining and for me adds a new dimension. There are perhaps educational uses to be explored such as engaging students in real-time discussion, asking them to critically reflect and evaluate what is being presented in real-time.
But what if you are busy on a Saturday night? Whilst you can rewind the programme via iPlayer and use the twitter search to pull up the tweets, these have become decoupled. This might have been a problem Tony Hirst encountered when he tweeted:
psychemedia mulling over how to replay a hashtagged feed in real time from, say, a two hour window (bbcrevolution) View tweet
Tony has been a valuable source for me in past, providing inspiration for my Twitter voting mash-up (TwEVS). Another of his ideas is a Twitter YouTube subtitle mashup, which extracts tweets to use as subtitles in YouTube videos of live events. Using exactly the concept I’ve come up with a way to allow a user to replay a downloaded iPlayer episode subtitling it with the tweets made during the original broadcast.
In action
So first to see the results in action. The video below shows the iPlayer playing ‘The Virtual Revolution: The cost of free’ displaying the tweets made during the live broadcast as subtitles.
How it was done
When you download a programme to watch using iPlayer as well as the video several other assets including a subtitle file in W3C Timed Text Authoring Format. To see this episode in full with twitter subtitles download The Virtual Revolution: The cost of free here. Once downloaded by default the programme should be saved in [My Documents] > [My Videos] > [BBC iPlayer] > [repository] > [obscure-broadcast-folder-name-like-b00qx4t0] (not sure what this would be for non-PC). To view with tweets open this folder and replace ‘obscure-broadcast-folder-name-like-b00qx4t0_prepared.xml’ file with this one [righ-click save link as], keeping the folder name at the beginning of the file name. When you play the video and turn on subtitles the tweets should be displayed.
To create the XML file for any downloadable BBC broadcast I created a tool using the same concept as Tony’s subtitling YouTube example. Here is the Twitter Powered Subtitles for BBC iPlayer Tool I created.
Whilst the tool was designed for the iPlayer it generates a timed text xml file which might be suitable for other applications. Hopefully the tool is straight forward to use all you have to do if find a programme with an active twitter back-channel (you might be surprised at how many their already are once you start searching). If you have any questions/problems post them in the comments below.
Here is the code used for this tool (it also uses the SimplePie code library for handling the RSS). The code includes comments to describe what is going on. Feel free to edit, modify or build upon again use the comments below to share developments.
Limitations and future directions
One of the limitations of this solution is it only replays tweets for the duration of the programme. Having looked around I haven’t been able to find any other twitter replay tools. A solution I did explore was using another W3C format called Synchronized Multimedia Integration Language (SMIL). This standard also integration of multimedia with text, images and other objects. My plan was to use the smilText JavaScript engine to replay tweets in the browser without linking it to any media. Having played around with the JavaScript engine I couldn’t get it to work. Perhaps the baton needs to be passed back to Tony … ;)
Welcome to the JISC RSC Scotland N&E 'MASHe' blog. The blog is designed to highlight news, events and resources related to higher education. Please feel free to leave a comment.
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):
A conversation with Brian Kelly led to a quick refresh of the 
@
@
So it is easy to setup a search which can identify possible messages you might want to send an out of office response, but how can we use this information? The key is that Twitter provides a feed for the search query. That is it provides the data for the search results in a machine readable format, RSS.
Update: 
psychemedia
Loading...
