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 http://hawksey.info/ititle/v/id/13314385/ or the Google I/O 2010 Android Demo at http://hawksey.info/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://hawksey.info/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 …

Last updated by at .

2 Responses to “Twitter subtitling, the three E’s: Embed, embed, embed”


Comments are currently closed.

About

This blog is authored by Martin Hawksey Google+

JISC CETIS Learning Technology Advisor (OER Programme Support)
jisc cetis logo

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:
Bluga.net Webthumb

The MASHebook

You can also download this post as:

Subscribe to monthly email digest of posts

Loading...Loading...


Subscribe to per post email updates

Enter your email address:

Delivered by FeedBurner

Copyright License

Creative Commons Licence
This work is licensed under a Creative Commons Attribution 3.0 Unported License. CC-BY mhawksey

Privacy /Cookies

This blog uses Google Analytics (which makes use of 'cookie' technologies) to provide information on usage. Here's an overview of Google Analytics Privacy and how to opt-out (other 3rd party services like Twitter might also be tracking you via this site, but as far as possible I try and prevent this by removing official tweet buttons).

Badges

. . .