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=quot;videoquot;> <a href=quot;muffy.mpgquot;> video
of a cute kitten (MPG, 2MB) </a> </div> <script type=quot;text/javascriptquot;> var params = {allowScriptAccess:'always'}; var atts = {id:'player'}; swfobject.embedSWF(quot;http://www.youtube.com/v/ T4y6M2AeQ00&amp;border=0&amp;enablejsapi=1&amp;pl ayerapiid=ytplayerquot;, quot;videoquot;, quot;425quot;, quot;356quot;, quot;8quot;, null, null, params, atts); </script>

Win #2: Built with events

<script type=quot;text/javascriptquot;> // 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. ★ Writeserver side control to create list of comments

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

transcript = { quot;urlquot;:quot;http://www.youtube.com/v/ T4y6M2AeQ00&amp;border=0&amp;enablejsapi=1&amp;pl
ayerapiid=ytplayerquot;, quot;entriesquot;:[ {quot;tquot;:quot;2.937quot;, quot;cquot;:quot;Cat descending staircasequot;}, {quot;tquot;:quot;48.668quot;, quot;cquot;:quot;Siouxie in nice dressquot;}, {quot;tquot;:quot;106.95quot;, quot;cquot;:quot;Siouxie on sofaquot;}, {quot;tquot;:quot;178.55quot;, quot;cquot;:quot;Get a haircut!quot;} ] }

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