SlideShare ist ein Scribd-Unternehmen logo
1 von 47
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Mehr von 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
 

Mehr von 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.
 

Kürzlich hochgeladen

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Kürzlich hochgeladen (20)

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

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