Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for June, 2008.

Archive for June, 2008

Problems with the YouTube Chromeless player being unavailable? – Change the URL

Thursday, June 12th, 2008

I am almost ready to release v2 of the easy youtube player but out of a sudden everything stopped working. I thought at first my own developer key got banned for incessant re-loading locally, but even Google’s own example is broken.

The solution to it seems to be to change the URL of the embed code:


// broken
swfobject.embedSWF(‘http://gdata.youtube.com/apiplayer?key= ... ‘)
// working
swfobject.embedSWF(‘http://gdata.youtube.com/apiplayer/cl.swf?key= ... ‘)

Thanks do d.kunchev who pointed this out on the mailing list

How to stop event delegation(obvious fact #12132)

Monday, June 9th, 2008

This was a question I got in the office today and there is no shame in asking it:

I am using Event Delegation on one of my products and I need to stop the main handler on the body from firing when I click a certain button. How do I do that?

The answer is of course to use stopPropagation() or cancelBubble(), both nicely wrapped in YAHOO.util.Event.stopPropagation():

HTML:







JavaScript:


YAHOO.util.Event.onContentReady(‘buttons’,function(){
YAHOO.util.Event.on(document.body,’click’,function(e){
var t = YAHOO.util.Event.getTarget(e);
snitch(‘

It was the ’ + t + ’ that was clicked

‘);
});
YAHOO.util.Event.on(‘tease’,’click’,function(e){
snitch(‘

that was the first button

‘);
YAHOO.util.Event.stopPropagation(e);
});
YAHOO.util.Event.on(‘tease2’,’click’,function(e){
snitch(‘

that was the second button

‘);
});
function snitch(msg){
document.getElementById(‘littlesnitch’).innerHTML += msg;
}

});

Try it out here: Overriding Event Delegation with stopPropagation

Yay for Jacob Seidelin to join me in accessihacking YouTube

Friday, June 6th, 2008

Jacob Seidelin took his JavaScript kung-foo skills off Super Mario for a short while and wrote a proof of concept how to get the annotations out of a YouTube video to display it outside the movie.

I’ve blogged about this idea here and his solution is an example to use timeout to poll for annotations being displayed.

One 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.

This has the same issues as my idea to display timed comments as subtitles below the movie – polling is just not safe (imagine buffering in between), so it seems a simple method in the YouTube player to fire events at certain times would be great. Something like this:


var events = {
times:[12312,12312314,14234234,234234234,23423425],
callback:onTimedEvent,
obj:{something:3}
}

ytplayer.timedEvents(events);
function onTimedEvent(o){
// o would be {time:12312,obj:{something:3}};
}

The object would be a nice to have, for example to keep scope.

Check out Jacob’s annotation scraping example here

280North bring Keynote to the web

Thursday, June 5th, 2008

I’ve first seen a preview of this at the first JavaScript developer meetup in San Francisco earlier this year, but now the 280 North guys have released their very Keynote-esque presentation editor for the web.

Have a play with it and especially check the key-commands and drag and drop support. The shape designer is also pretty nifty. That said, I am on a hefty MacBook pro, so I’ll check the performance on the old work-horse Thinkpad at home later.

The most amazing thing about this is happening under the hood: the developer wrote a library that abstracts browser rendering engines using Canvas, SVG and Flash (on a per-need basis) into a unified language – Objective J which is – as the name suggests – a mapping from Objective C to JavaScript.

I tried to milk them for more information when we met briefly (yes, the guys involved did work at Apple before – obvious, isn’t it), and will try to cover this interesting concept in more detail soon on Ajaxian or YDN.

YouTube now with annotations – can we get those as an API please (captioning)?

Wednesday, June 4th, 2008

YouTube just released a new feature for video content generators: annotations. As you can see in this example video of someone jumping out of an aircraft the annotations show up whereever you want to put them on the screen and are time-based. You can even add links and hotspots to other videos and search results which means you can do interactive games using several videos.

Now this is all cute and nice, but what I’d want is API access to these annotations. This would allow us to provide not only captioning of the video for the hard of hearing but also information for blind visitors. I’ve written about this before, you can easily create an interface to have timed captioning on youtube but playing the captions back is trickier as you have no means of syncing the video (if the video buffers in between the captions and the video get out of sync).

Now, if YouTube came up with an API access to these captions that fires an event every time a new caption starts with the type of caption and its text value, it would be dead easy to update a hidden form field with that text (or an ARIA live region) to provide a poor man’s captioning and information for the hard of hearing.

YouTube could become both a larger consumer faced product by enabling more disabled visitors to gain access and a means of captioning video that is intuitive and easy to use.

I’d be happy to help out!