Annotating YouTube videos programatically

Question

I want to be able to display a normal youtube video with overlaid annotations. This consists of colored rectangles for each frame. The only requirement is that this be done programatically. Youtube has annotations now, but require you use their front end to create them by hand. I want to be able to generate them. What's the best way of doing this?

Some ideas:

1. Build your own flash player (ew?)
2. Somehow draw over the youtube flash player. Will this work?
3. Reverse engineer & hijack youtube's annotation system. Either messing with the local files or redirecting it's attempt to download the annotations. (using greasemonkey? Firefox plugin?)

Ideas that don't count: download the video, edit it, re-encode it, and upload it :P

Answer 1

You couldn't programmatically hook into their front end? I'm pretty inexperienced when it comes to this sort of stuff, though.

Answer 2

The solution is easy: don't use YouTube.

Many other video websites support annotating videos. Use one of them other than YouTube.

It would not be possible to do that with Greasemonkey or a Firefox plugin, as you can't interact with the flash player.

Answer 3

@engtech

There are other video sites that let have an annotation API capable of overlaying annotations on some frame-by-frame basis? Do you know which? I haven't really been able to find what I'm looking for.

Answer 4

The player itself has a Javascript API that might be useful for syncing the video if you choose to make your own annotation-thingamajig.

Answer 5

YouTube provides an ActionScript API:

http://code.google.com/apis/youtube/flash_api_reference.html

Using this, you could load the videos into Flash using their API and then have your Flash app create the annotations on a layer above the video.

Or, alternatively, if you want to stay away from creating something in Flash, using YouTube's JavaScript API you could draw HTML DIVs over the YouTube player on your web page. Just remember when you embed the player to have WMODE="transparent" in the params list.

So using the example from YouTube:

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer", wmode: "transparent" };
    swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID&amp;enablejsapi=1&amp;playerapiid=ytplayer", 
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

And then you should be able to draw your annotations over the YouTube movie using CSS/DHTML.

Answer 6

Joe Berkovitz has written a sample application called ReviewTube which "Allows users to create time-based subtitles for any YouTube video, a la closed captioning. These captions become publicly accessible, and visitors to the site can browse the set of videos with captions. Think of it as a “subtitle graffiti wall” for YouTube!"

The app is the example used to demonstrate the MVCS framework/approach for building Flex applications.

http://www.joeberkovitz.com/blog/reviewtube/

Not sure if this will help with the colored rectangles and whatnot, but it's a decent place to start.