SlideShare a Scribd company logo
1 of 47
Download to read offline
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

More Related Content

More from Christian Heilmann

Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfChristian Heilmann
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
Turning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftTurning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftChristian Heilmann
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansChristian Heilmann
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017Christian Heilmann
 
Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.Christian Heilmann
 

More from Christian Heilmann (20)

Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Turning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftTurning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and Microsoft
 
Supercharging Public Speaking
Supercharging Public SpeakingSupercharging Public Speaking
Supercharging Public Speaking
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
 
Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.Suit up, bring extra oxygen Internet space explorers needed.
Suit up, bring extra oxygen Internet space explorers needed.
 

Recently uploaded

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxjbellis
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideStefan Dietze
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 

Recently uploaded (20)

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 

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.
  • 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.
  • 10. Do online video services have captioning high on their priority list?
  • 12. Do they miss out because of that?
  • 14. Why?
  • 15. Accessible captions in an easy format = SEO win!
  • 16. Does answering your own questions make you look like a pretentious idiot?
  • 18. Option #2: De-moronify comments by giving people an incentive to stick to the subject at hand.
  • 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?
  • 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.
  • 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
  • 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?
  • 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 :)
  • 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