Accessihacking YouTube

Christian Heilmann, BarCamp Brighton, March 2008

How do you make Powerpoint and PDF files accessible?

Option #1:Learn about all the settings of

Acrobat and Powerpoint.

Do not want!

Option #2:Upload the file to slideshare.net!

Screenshot of slideshare.net, which automatically generated a text representation of the slides for you

How do you make online video accessible?

Option #1:Pay for transcription and

captioning, offer timed captions in some random

binary formats and pray that some player will support it.

Do not want!

Do online video services have captioning high on their

priority list?

Not really.

Do they miss out because of that?

Totally!

Why?

Accessible captions in an easy format

=SEO win!

Does answering your own questions make you look like a

pretentious idiot?

Totally!

Option #2:De-moronify comments by

giving people an incentive to stick to the subject at hand.

Viddler does it.

Screenshot of a video on viddler.com with timed comments.

Viddler is not that big and known though.

We want mainstream accessibility.

Solution: Hack the planet system.

How do you hack a system the legal way?

Use an API!

YouTube JavaScript API=

full of win!

Win #1: Built on top of SWFObject

<div id="video"> <a href="muffy.mpg"> video of a cute kitten (MPG, 2MB) </a> </div>

<script type="text/javascript"> var params = {allowScriptAccess:'always'}; var atts = {id:'player'}; swfobject.embedSWF("http://www.youtube.com/v/T4y6M2AeQ00&amp;border=0&amp;enablejsapi=1&amp;playerapiid=ytplayer", "video", "425", "356", "8", null, null, params, atts);</script>

Win #2: Built with events

<script type="text/javascript"> // do stuff, the player is ready! function onYouTubePlayerReady(id){

// get the player v = document.getElementById('player');

// do stuff when the player state changes v.addEventListener('onStateChange', 'onPlayerStateChange');

// do stuff when there is a player error v.addEventListener('onError', 'onPlayerError');

}</script>

Player states:

unstarted (-1)ended (0)playing (1)paused (2)buffering (3)video cued (5).

Win #3: Lots of methods

playVideo, pauseVideo, stopVideo, clearVideo, getVideoBytesLoaded,

getVideoBytesTotal, getVideoStartBytes, mute,unMute, isMuted, setVolume,

getVolume, seekTo, getPlayerState, getCurrentTime, getDuration,

addEventListener, getVideoUrl, getVideoEmbedCode

The important ones for this hack:

playVideo, pauseVideo, stopVideo, clearVideo, getVideoBytesLoaded,

getVideoBytesTotal, getVideoStartBytes, mute,unMute, isMuted, setVolume,

getVolume, seekTo, getPlayerState, getCurrentTime, getDuration,

addEventListener, getVideoUrl, getVideoEmbedCode

getCurrentTime() gives us the time of the video and seekTo()

jumps to the section of the video and plays from there.

Battle plan!

★ Create form after video when the player is ready.

★ Every time the player is paused, create timestamp link and comment field.

★ Write server side control to create list of comments

http://icant.co.uk/sandbox/youtube-captioning.html

transcript = { "url":"http://www.youtube.com/v/T4y6M2AeQ00&amp;border=0&amp;enablejsapi=1&amp;playerapiid=ytplayer", "entries":[ {"t":"2.937", "c":"Cat descending staircase"}, {"t":"48.668", "c":"Siouxie in nice dress"}, {"t":"106.95", "c":"Siouxie on sofa"}, {"t":"178.55", "c":"Get a haircut!"} ]}

Where is this going?

Broadway.

★ The YouTube team like the idea.

★ Stanford university is working on a flash player with captions and like it.

★ Someone on GeekUp is writing a GreaseMonkey script to hack YouTube

★ I will pester Yahoo! video

★ I’ll be back in two week’s time :)

Things I asked for:

Ability to pass in the JSON object that will fire events

with the text at the defined time - this would allow us to populate a form field to tell screen readers what is

going on.

The reason is that you seem not to be able to focus an element when the Flash

player is on.

THANKS!

Chris Heilmann

http://wait-till-i.com