accessihacking online video
DESCRIPTION
My presentation for Barcamp Brighton about how you can use the YouTube API to make it more accessible by creating time-based captions.TRANSCRIPT
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&border=0&enablejsapi=1&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&border=0&enablejsapi=1&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.
