Monthly Archive for July, 2010

Using YouTube for audio/video feedback for students

A long, long, long time ago I wrote a post Using Tokbox for Live and Recorded Video Feedback in which I demonstrated how the free ManyCam software could be used to turn your desktop into a virtual webcam to provide feedback on students work in a Russell Stannard styley. Recently my colleague Kenji Lamb was showing me how you could directly record your webcam using YouTube, so I thought I would revisit this idea.

This time instead of focusing on the use of the visual element as a tool to direct students attention to a specific part of a assessment submission (e.g. highlight and talking about parts of a word document), I thought it would be interesting to demonstrate it in a more abstract way using images to reinforcing audio comments (e.g. you did good – happy face; you did bad – sad face).

When previously looking at audio feedback I’ve been very aware that reducing as much of the administrative burden is very important. Online form filling whether it be through the VLE, other systems or in the YouTube example, can be a bit of a chore so in this demonstration I also touch upon using bookmarklets to remove some of the burden. Here is a link to the bookmarklet I created for student feedback on YouTube (YouTube Feedback Template – you should be able drag and drop this to your bookmark toolbar but if you are reading this through an RSS reader it might get stripped out).

Having this link in you toolbar means when you get to the video settings you can click it to populate the form. Bookmarklets are a nice tool to have in the chest so I’ve covered them in more detail in Bookmarklets: Auto form filling and more. This post also shows you how you can create your own custom filling bookmarklet using Benjamin Keen’s Bookmarklet Generator.

So here it his a quick overview of using YouTube for recording student feedback:

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

Bookmarklets: Auto form filling and more

Bookmarklets are small applications which can be saved in your web browser as … well ‘bookmarks’, which then let you use one-click automation of a wide variety of tasks from sending links, manipulating font-size, looking up related information. JISC TechDis even have a collection of web accessibility tools as part of their JISC TechDis Toolbar bookmarklet.

drag this link into your browser's bookmark area (in Firefox/Chrome), or right-click the link and add it to your favourites (IE)

A good starting point to find out about other bookmarklets is 100 Best Bookmarklets for Writers, Researchers, and Students.

The video below demonstrates how I used Benjamin Keen’s Bookmarklet Generator to create my own YouTube Form Filler covered in the post Using YouTube for audio/video feedback for students.

Bookmarklet GeneratorHere is the link I use in the video to add the Bookmarklet Generator to your browser:

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

Do you use bookmarklets? Any favourites you would like to share.

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 …

What I’ve starred this week: July 27, 2010

Here's some posts which have caught my attention this week:

Automatically generated from my Google Reader Shared Items.

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 …

What I’ve starred this week: July 20, 2010

Here's some posts which have caught my attention this week:

Automatically generated from my Google Reader Shared Items.

Your Inbox: Getting More Social

I feel bad for not blogging recently so I’m going to cheat a bit. Today BBC News – Technology had a story about Outlook gets Facebook integration, which talks about the MS Outlook Social Connector. Originally I was just going to ‘tweet’ a link to the story with a related link to something I had written on this area in March, but then discovered I wrote it for our RSC NewsFeed blog. So I’m going to repost Your Inbox: Getting More Social here updating with a plugin I use with Gmail called rapportive.

Some of you maybe sick of the ‘social’ tag being used on virtual every new website start-up, and you maybe about to get sicker when you find out software developers want to ‘socialise’ your inbox.

Microsoft Outlook 2010

First we have Microsoft’s Social Connector add-on for Outlook 2010. This allows users to view and use information from other Microsoft products and third party sites (so far Linkedin, Facebook and MySpace), as part of you inbox. The video below demonstrates the features of the product:

Click here for more information on Outlook Social Connector

Google Buzz

A couple of weeks ago we also highlighted Google Buzz = New Way to Organise Social Information on the Web, which again allows you to integrate a whole host of social networking sites. It is probably a stretch to say Buzz ‘integrates into your inbox’, sitting as it does in a separate tab within Google Mail. There is however some integration by using @reply to post directly to someone’s inbox.Click here for more of Google’s top Buzz tips.

Google Buzz @reply screenshot 
Google Buzz @reply screenshot

Mozilla Thunderbird/Raindrop

Mozilla is the home of the Internet browser Firefox and other open source projects including their e-mail client Thunderbird and the more experimental communication tool, Raindrop. Just like Firefox Mozilla’s philosophy is to make it as easy as possible for third party developers to create additional functionality to their applications via add-ons. Social networking integration in Thunderbird is a little thin on the ground two example I’ve come across are WiseStamp – Email Signature and RapLeaf 4 Thunderbird add-on by DanielT. WiseStamp enables you to pull your existing social network information dynamically into your email signature, while the other integrates with the RapLeaf web service allowing you to see the senders registered social networks within the preview pane. Before you go rushing to sign up for Rapleaf their business is selling user behavioural patterns, which you can read more about in Mashable’s How Companies Are Using Your Social Media Data

RapLeaf 4 Thunderbird integration
RapLeaf 4 Thunderbird screenshot

Raindrop is perhaps more promising, but still in early development:

Raindrop is an experiment in designing for today’s messaging habits by collecting conversations from important messaging sources (email, twitter, …), understanding them, and organizing them for the user based on this understanding.


Rapportive are a UK based startup who have developed Firefox and Chrome plugins which replace the advert bar on Google Mail with information about the sender from a combination of sources (Gravatar, Plancast, Rapleaf and Twitter). Users also have an option to add their own notes about the sender (the CRM part). The main way I use this is to filter re-follow notification from Twitter, but  this is probably more a reflection on the fact that my Gmail is a personal account and I’m sure I could get a lot more from this service.


Final thoughts

Your inbox is undoubtedly evolving, and reflects wider developments in the semantic web. As the world strives towards greater “data, information and knowledge exchange” communication tools like email will become enriched with information both purposely and surreptitiously pulled from the web. It should however be remembered that whilst many of us our inbox as the centre of our daily activities, can the same be said for students?

What I’ve starred this week: July 13, 2010

Here's some posts which have caught my attention this week:

Automatically generated from my Google Reader Shared Items.

What I’ve starred this week: July 6, 2010

Here's some posts which have caught my attention this week:

Automatically generated from my Google Reader Shared Items.


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