YouTube Annotations and JavaScript
YouTube recently added a new annotation feature, but at the moment it's still beta and annotations only show up on youtube.com and not on embedded videos. It's a neat feature in itself, but as Chris Heilmann posted, it would be nice if there was an API available to access those annotations.
So, I went and looked and made an attempt at accessing and using these annotations with Javascript and embedded videos. The annotations are available as XML data and I've used two lines of PHP to retrieve the XML and feed it raw to the JS. Then my horribly inefficient approach uses a timer with a short interval that runs through all annotations and checks which ones are currently visible. It fires two custom events on the player object when an annotation is either added or removed.
I even tried to render the annotations on top of the video, but putting DOM stuff on top of Flash isn't always fun. It depends on changing the movie's "wmode" parameter something other than "window" and in some browsers that stalls the timer while the video is playing.
Only FF3 (maybe FF2?) and Safari can do both the events and the overlayed annotations, it seems.
I suppose if we just skip the whole overlayed annotations thing and wait for them to show up in embedded videos, everything will be fine.
Check it out here, but be warned. It's not very stable, and I've managed to make both FF, Opera and IE crash. Reloading the page before loading a new video might help.
Edit: The overlayed annotations have been scrapped, since it just wasn't stable enough.
So, I went and looked and made an attempt at accessing and using these annotations with Javascript and embedded videos. The annotations are available as XML data and I've used two lines of PHP to retrieve the XML and feed it raw to the JS. Then my horribly inefficient approach uses a timer with a short interval that runs through all annotations and checks which ones are currently visible. It fires two custom events on the player object when an annotation is either added or removed.
I even tried to render the annotations on top of the video, but putting DOM stuff on top of Flash isn't always fun. It depends on changing the movie's "wmode" parameter something other than "window" and in some browsers that stalls the timer while the video is playing.
Only FF3 (maybe FF2?) and Safari can do both the events and the overlayed annotations, it seems.
I suppose if we just skip the whole overlayed annotations thing and wait for them to show up in embedded videos, everything will be fine.
Check it out here, but be warned. It's not very stable, and I've managed to make both FF, Opera and IE crash. Reloading the page before loading a new video might help.
Edit: The overlayed annotations have been scrapped, since it just wasn't stable enough.
Great stuff, I linked it on my blog.
June 6, 2008 at 6:02 AM Jacob SeidelinOne little change with a massive impact would be to display the annotations in a form field - thus automatically updating screen reader buffers that there was a change.
That's what the two events are for, I guess. It would be as simple as
June 6, 2008 at 6:35 AM AnonymousoPlayer.onAnnotation = function(id,text,t1,t2) {
$("formfield").value = text;
}
If I do more work on this, I think I'll just drop all the visual stuff, clean up the data handling a bit and supply the events needed to do whatever you want with the annotations (like updating form fields).
These guys actually came up with a funny way to use annotations, thought you might like it.
June 25, 2008 at 12:22 PM Jacob Seidelinhttp://www.youtube.com/watch?v=iqujFiwL5cs
-Paul
Hah. Thanks for the link, that's pretty cool.
June 25, 2008 at 2:56 PM EmBotDo you have a copy of the link you used to access that annotation XML? Is that what was too unstable to keep using?
December 17, 2010 at 12:08 PMI'm looking for a way to access the annotations, much like using "timedtext" in the URL below to access captions.
"http://video.google.com/timedtext?lang=en&v=myVideoID"
Thanks much for any insight.