My presentation for Barcamp Brighton about how you can use the YouTube API to make it more accessible by creating time-based captions.

1. Accessihacking
YouTube
Christian Heilmann, BarCamp Brighton, March 2008

2. How do you make Powerpoint
and PDF files accessible?

3. Option #1:
Learn about all the settings of
Acrobat and Powerpoint.

4. Do not want!

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

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

7. How do you make online video
accessible?

8. Option #1:
Pay for transcription and
captioning, offer timed
captions in some random
binary formats and pray that
some player will support it.

9. Do not want!

10. Do online video services have
captioning high on their
priority list?

11. Not really.

12. Do they miss out because of
that?

13. Totally!

14. Why?

15. Accessible captions in an easy
format
=
SEO win!

16. Does answering your own
questions make you look like a
pretentious idiot?

17. Totally!

18. Option #2:
De-moronify comments by
giving people an incentive to
stick to the subject at hand.

19. Viddler does it.

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

21. Viddler is not that big and
known though.

22. We want mainstream
accessibility.

23. Solution: Hack the planet
system.

24. How do you hack a system the
legal way?

25. Use an API!

26. YouTube JavaScript API
=
full of win!

27. Win #1: Built on top of
SWFObject

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

29. Win #2: Built with events

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

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

32. Win #3: Lots of methods

33. playVideo, pauseVideo, stopVideo,
clearVideo, getVideoBytesLoaded,
getVideoBytesTotal, getVideoStartBytes,
mute,unMute, isMuted, setVolume,
getVolume, seekTo, getPlayerState,
getCurrentTime, getDuration,
addEventListener, getVideoUrl,
getVideoEmbedCode

34. The important ones for this
hack:

35. playVideo, pauseVideo, stopVideo,
clearVideo, getVideoBytesLoaded,
getVideoBytesTotal, getVideoStartBytes,
mute,unMute, isMuted, setVolume,
getVolume, seekTo, getPlayerState,
getCurrentTime, getDuration,
addEventListener, getVideoUrl,
getVideoEmbedCode

36. getCurrentTime() gives us the
time of the video and seekTo()
jumps to the section of the
video and plays from there.

37. Battle plan!

38. ★ 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

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

40. 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;}
]
}

41. Where is this going?

42. Broadway.

43. ★ 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 :)

44. Things I asked for:

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

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

47. THANKS!
Chris Heilmann
http://wait-till-i.com