Successfully reported this slideshow.
Your SlideShare is downloading. ×

Accessihacking Online Video

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Cloud History 101
Cloud History 101
Loading in …3
×

Check these out next

1 of 47 Ad
Advertisement

More Related Content

More from Christian Heilmann (20)

Recently uploaded (20)

Advertisement

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

×