Following the accessibility hack of YouTube I thought the same could be done for Flickr, and here it is:

Easy Flickr is a very basic interface to look for photos and click through them 20 at a time. It works with and without JavaScript.

Update: It seems there is some confusion as to how this interface works. The main photo is linked to flickr.com (as per API guidelines) and you can navigate up to 20 results by clicking the lower thumbnail to go forward and the upper one to go backward in the results list. This also works with a keyboard and in JAWS but I need to make it more obvious with a hover state and some labels for screen readersand I added some roll-overs and texts for screen readers to make it more obvious..

• Check out Easy Flickr
• Get the source code

If you want to host the interface yourself, you need a server with PHP and cURL, but that’s it. Simply unpack the zip file and change the look and feel by changing the style sheet.
[tags]accessibility,flickr,interface,easy,simple[/tags]

Warning: The YouTube API is flaky at the moment, so there might be some outages!

At this year’s Accessibility2.0 conference in London Antonia Hyde from United Response asked the audience for technological solutions to make the social web easier accessible for people with learning disabilities.

Her presentation Rich Media and web apps for people with learning disabilities is available on slideshare.

Whilst not being able to tackle all the issues mentioned (probably the biggest one being captioning) I took some time to play with the YouTube API to create a much easier interface to watch videos. The following screenshot shows the Easy YouTube Player in action:

Using the player

You can use the player in several ways, the easiest is to just copy and paste a youtube url in the url field. However, there is also a sort of REST interface that allows you to do more:

Shows the player without any movie loaded, empty search fields and playlists.

Pre-loads the video of this YouTube address and shows the preview image in the player.

Performs a search on YouTube for the term panda and shows links to the videos in the playlist on the right. You can use more than one search word by adding them with a “+”. For example:

One last option you have is to bookmark certain videos on del.icio.us and tag them for a user. In order to show these videos as a playlist you need to provide your user name and the tag separated by a dash. For example my user name on del.icio.us is “codepo8” and I bookmarked some videos with the tag “easyyoutubeplayer”. The following link will show them all in the playlist:

You can mix and match the different options. If you for example want to show a video and perform a search for other videos you can use:

Documentation

The full player documentation with instructions on how to host the player yourself is available in the docs folder Easy YouTube Player documentation.

Download

You can download the player with all the demo files here:

• Download Easy YouTube Player V2
• Download Easy YouTube Player V1.5
• Download Easy YouTube Player V1.0

Changes

12/06/08

• complete re-write of code
• new buttons – glass were too complex
• added video size control
• added search and playlist support
• added address field to send to friends
• player now template driven – no more changes in main code needed
• added documentation
• added RESTful interface

28/05/08

• moved buttons to the bottom of the player
• text is now below the buttons and has an invisible extra “use this button to ” text for screen readers
• pause button now toggles pause/play
• mute button now toggles mute/sound
• the URL of the buttons is not an anchor but a url now (that goes nowhere, but this is just to read out the right command)
• removed the “current highlight” state
• added a volume level indicator (as a visual bar and a hidden form field)

[tags]youtube,accessibility,kids,learningdisabilities,player,usability,free,api,player,video,social[/tags]

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

[tags]youtube,player,flash,api,chromeless,google,fix[/tags]

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

[tags]events,javascript,eventdelegation,webdevtrick[/tags]

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