Technical explanation of how creating and displaying youtube annotations works?

0
votes

I will soon begin working on a school project that involves the use of real-time annotations in videos. I really like the way youtube's annotation system works and am really curious to learn how they created it. And more specifically, figuring out how to reproduce the main components of their functionality.

If you expand the main points, this link covers a high level of what's possible with annotations. http://www.google.com/support/youtube/bin/answer.py?answer=92710

Would anyone be able to provide a technical explanation of how this system of creating and displaying annotations works? (Ex. A database stores the start time of an annotation, the end time of an annotation, the text block of the annotation, and a unique numeric identifier for the annotation. When a video reaches the start time of an annotation it's displayed until the end time.)

More specifically does anyone know what tools were used to created this system? Was flex used or was it done in purely in something like flash professional?

I found it difficult to read up on any technical details about annotations. The youtube actionscript 3.0 api documentation doesn't mention annotations

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

Thanks much

1
flashapache-flexyoutubeannotationsflex3

1 Answers

1
votes

First off, it won't matter what development environment was used, but I'd recommend doing any sort of advanced Flash development in FlashBuilder/Flex.

Secondly, the YouTube api is for third-party developers to access features of the YouTube platform, you won't find any special hidden info about how the YouTube product has been developed.

Anyway, let's have a look at how annotations work.

  1. They need to be created by end-users, so they need to have a forgiving, easy to use creation/edit method.

  2. They need to be quickly provided for each video when it's requested, so a structured text file containing the meta data for the annotations is the best fit (XML perhaps due to the Flash E4X technology, or JSON, since there are adequate JSON libs for Flash too.) These structured text files are probably stored in a database (likely a NoSQL type solution.)

As for the format of the meta-data, you need an on/off cue, coordinates, style, message text, and perhaps a click-through link. Use the YouTube video annotator and make a note of all the things you can do when adding/editing annotations, then you have a list of all the things that the meta-data needs to store.

Flash video allows the use of cue points embedded in the FLV, so these can be used to link to the custom meta-data and display the appropriate annotation in the coordinate/style/text for that specific cue on. Similarly, when a cue point that corresponds to an annotation's cue-off, we can then remove it from the display.

This is a fairly rudimentary overview, leave a comment for things you want me to expand on, also I'm not covering every possible way that YouTube implements it's different types of annotations, for example, speech bubbles; ignoring cue-close for annotations which have been closed; spotlights etc etc, but when you are building a simple annotation system you can ignore these extra details for your first version.

References:

Additional references: