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
 ...
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=...
Win #2: Built with events
<script type=quot;text/javascriptquot;>
  // do stuff, the player is ready!
  function onYouTubePlayerReady(id){

    // g...
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,...
The important ones for this
          hack:
playVideo, pauseVideo, stopVideo,
     clearVideo, getVideoBytesLoaded,
getVideoBytesTotal, getVideoStartBytes,
     mute,...
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...
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=...
Where is this going?
Broadway.
★   The YouTube team like the idea.
★   Stanford university is working on
    a flash player with captions and
    like it....
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 popula...
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
Upcoming SlideShare
Loading in …5
×

Accessihacking Online Video

7,227 views

Published on

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

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/yT1SNP
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,227
On SlideShare
0
From Embeds
0
Number of Embeds
518
Actions
Shares
0
Downloads
56
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Accessihacking Online Video

  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

×