Home 損 Topics 損 Programming

Annotate your YouTube video with AnnoTube

Michael Geary | Tue, 2008-06-03 19:57
category

AnnoTube is a jQuery plugin that makes it easy to embed a YouTube video in your page along with an index and notes that are displayed and synchronized with the video as it plays. Each note can be an HTML snippet, or a URL to be loaded into an IFRAME, or even a JavaScript function to be run when a specific time in the video is reached.

Here’s a demo: the Mapping the Votes talk I gave at Google in April, with annotations provided by AnnoTube. This solves a mistake I made in this talk: Like many speakers, I left the text too small in my code examples. It looked fine to the people in the room, but the code is really hard to read in the YouTube video. But with the annotations I can put big, readable text right next to the video at the right time.

Fair warning: At this moment, I’ve only annotated the first 15 minutes of the video, and all of the notes so far are actually web pages in an IFRAME. Also, the AnnoTube plugin itself isn’t quite ready for general use. This is all a bit of work in progress, which started with something I put together for fun during the Google I/O conference. I’m only posting now because the YouTube API team is mentioning it in a post of their own, so please watch this page for updates over the next few days.

For a start, here’s what the timeline for my talk looks like (with URLs shortened to avoid long lines):

$.annotube({
    "video": "QIPKmkeMuz4",
    "timeline": [
        "00:00|Introduction: Pamela Fox",
        "00:14|GAsync() API|https://mg.to/...",
        "00:58|Iowa Mapplet|https://maps.google.com/maps/mpl?moduleurl=...",
        "01:37|Mapplet Performance",
        "02:07|Iframes and Security",
        "02:46|The Hash Hack",
        "04:56|Iowa Maps API Map|https://gmaps-samples.googlecode.com/...",
        "05:55|Mouseovers in API and Mapplet",
        "06:25|New Hampshire API Map|https://gmaps-samples.googlecode.com/...",
        "07:06|My Biased Map",
        "07:35|Three Kinds of Bias",
        "07:54|Winner Takes All?",
        "08:42|Where are the Delegates?",
        "08:50|Big County, Little County",
        "09:45|A Good-Looking Map",
        "10:10|Another Form of Bias?",
        "11:18|Tiles and Tweets|https://maps.google.com/maps/mpl?moduleurl=...",
        "11:45|A Twittervision Clone",
        "13:05|Proportional Pins|https://maps.google.com/maps/mpl?moduleurl=...",
        "14:35|The Gadget Version|https://gmodules.com/ig/creator?synd=...",
        ""
    ]
});

As you can see, it’s just a simple list of times, titles, and links or HTML snippets. AnnoTube takes care of connecting the events and watching for the times you specify.

More details soon… Thanks for your interest and patience!

Love it!
Submitted by Mike Alsup (not verified) on Wed, 2008-06-04 16:05.

This is really, really cool, Mike! I Can’t wait to use it.

Very Excited!
Submitted by Minneapolis Guy (not verified) on Thu, 2008-08-21 07:05.

Wonderful idea! I can’t wait to see it in action. I have been looking for a way to do this off-site from google and automate the process. Can the file use to annotate be filled with .xml?

can I use Youtube API to
Submitted by Anil (not verified) on Thu, 2008-06-05 11:15.

can I use Youtube API to play videos not on youtube.com? Anil

Can't Wait
Submitted by Jacb (not verified) on Sat, 2008-06-07 17:44.

Can’t wait to figure out how to get this added to my videos section.. I’ve already got plans to customize it so members can edit the annotations :)

Is there a list?
Submitted by Jacob (not verified) on Sun, 2008-06-08 11:04.

Is there a mailing list I can join so I don’t forget to keep checking back?

Looks very cool, I can’t wait to try it. Are you going to be releasing a packaged demo?

Seriously, that sounds
Submitted by Visitor (not verified) on Wed, 2008-06-11 19:13.

Seriously, that sounds awesome!

Any updates?
Submitted by Matt (not verified) on Mon, 2008-06-16 08:07.

I noticed you said it would be a while before you got anything new up.. any chance of revealing when? :)

You'll be the first to know :-)
Submitted by Michael Geary on Tue, 2008-06-17 20:20.

Sorry, guys, I’ve been swamped this last couple of weeks on another project. Belated thanks to all for the kind words.

I expect to be able to get a day free this week to work on this and get a not-so-pre-alpha version ready…

This is a nice section of code
Submitted by Richard Metcalfe (not verified) on Sat, 2008-06-21 16:13.

Hey, this is going to be great i like this idea.

This looks like a cool use
Submitted by Adult (not verified) on Thu, 2008-06-26 14:22.

This looks like a cool use of JSON. It begs the question: Could we have a JSON subtitle format in unicode, rather than the current bulky method of storing chinese characters as images? I have also noticed that Firefox have switched over from their old bulky method of storing bookmarks in HTML format to storing them in JSON.

Any plans to develop Annotube any further?
Submitted by Michael Bolger (not verified) on Tue, 2008-07-22 03:29.

Greetings Michael Geary, do you have any plans to develop Annotube any further?

“please watch this page for updates over the next few days”

Thank You Michael Bolger

Been working on it :-)
Submitted by Michael Geary on Wed, 2008-07-23 14:28.

It’s been a long “few days,” hasn’t it? {embarrassed grin}

I actually have been working on it and have added the features I was missing to finish the annotation of my own video. Almost ready for you to try out. (Dare I say “a few days?” Hopefully sooner!)

Sorry about the delay, and thanks for your patience.

Great for Content Developers
Submitted by Michael Bolger (not verified) on Fri, 2008-07-25 02:56.

‘a long

time saver
Submitted by david nicholas (not verified) on Thu, 2008-09-18 02:31.

Our programmer has been promising to do a similar plug in for ages now, - so thanks for doing his work

Sounds like me
Submitted by Michael Geary on Wed, 2008-10-01 22:57.

Your programmer sounds just like me. After all, I’ve been promising this plugin for ages now!

I actually did spend some time polishing it up, and now that I have that Google voter info project out of the way, I’m going to publish it right now before I get busy with something else!

Sorry for the delays…

Yes, of course Michael,
Submitted by Jorden (not verified) on Thu, 2008-10-02 04:11.

Yes, of course Michael, I’m waiting for some more details. As for me I’d like to get something witch will take care of connecting the events and watching for the times. I’d like to know more about AnnoTube.

Could we have a JSON
Submitted by English (not verified) on Fri, 2009-02-13 01:56.

Could we have a JSON subtitle format in unicode, rather than the current bulky method of storing chinese characters as images??

Well, for me it
Submitted by Rickey (not verified) on Mon, 2008-10-06 09:00.

Well, for me it

looks awesome
Submitted by Eric (not verified) on Mon, 2008-11-24 20:15.

This looks awesome! Could we get an update on the status of Annotube?

Thanks for all your hard work, Eric

nudge? tickle? thx!
Submitted by steve (not verified) on Tue, 2009-02-24 05:45.

nudge? tickle? thx!