[xiph-commits] r4073 - in itext: . skins/schmucker

[silvia at svn.annodex.net]

Author: silvia
Date: 2010-02-10 23:27:05 -0800 (Wed, 10 Feb 2010)
New Revision: 4073

Modified:
   itext/elephant_with_skin.html
   itext/skins/schmucker/tinyvid.js
Log:
Added some accessibility function to the skinned player.


Modified: itext/elephant_with_skin.html
===================================================================
--- itext/elephant_with_skin.html	2010-02-07 10:48:04 UTC (rev 4072)
+++ itext/elephant_with_skin.html	2010-02-11 07:27:05 UTC (rev 4073)
@@ -46,6 +46,11 @@
 
     <script type="text/javascript" src="skins/schmucker/tinyvid.js"></script>
     <link href="skins/schmucker/tinyvid.css" type="text/css" rel="stylesheet"/>
+
+    <script type="text/javascript">
+    // remove space action scrolling
+    window.addEventListener('keydown',function(e){if(e.keyCode==32){e.preventDefault();}},true);
+    </script>
     
     <title>Experiment with video accessibility and time-aligned text</title>
   </head>
@@ -139,13 +144,13 @@
 
         </div></div></div>
         <div class="sw"><div class="se"><div class="sc">
-            <a class="play btn" href="#play" aria-live="off">
+            <a class="play btn" href="#play" title="play button" tabindex="10">
               <img src="skins/schmucker/images/button_play.png" alt="video play button"/>
             </a>
-            <a class="stop btn" href="#stop" aria-live="off">
+            <a class="stop btn" href="#stop" title="stop button" tabindex="20">
               <img src="skins/schmucker/images/button_stop.png" alt="video stop button"/>
             </a>
-            <div class="seeker bar">
+            <div class="seeker bar" title="seeking bar" tabindex="30">
 
                 <div class="fill">
                     <div class="progress"></div>
@@ -155,10 +160,10 @@
                     <div class="w"></div><div class="e"></div>
                 </div>
             </div>
-            <a class="sound btn" href="#sound"><img class="soundimg" aria-live="off" src="skins/schmucker/images/sound.png" alt="video volume" /></a>
-            <a class="itext btn" href="#itext"><img class="itextimg" aria-live="off" src="skins/schmucker/images/itext.png" alt="Access Subtitles, Captions and Audio Descriptions - press space bar"/></a>
+            <a class="sound btn" href="#sound" title="sound on/off" tabindex="40"><img class="soundimg" aria-live="off" src="skins/schmucker/images/sound.png" alt="video volume" /></a>
+            <a class="itext btn" href="#itext" title="text button" tabxindex="50"><img class="itextimg" aria-live="off" src="skins/schmucker/images/itext.png" alt="Access Subtitles, Captions and Audio Descriptions - press space bar"/></a>
 
-            <div class="volume bar">
+            <div class="volume bar" title="volume bar">
                 <div class="fill">
                     <div class="progress"></div>
                     <div class="w"></div><div class="e"></div>

Modified: itext/skins/schmucker/tinyvid.js
===================================================================
--- itext/skins/schmucker/tinyvid.js	2010-02-07 10:48:04 UTC (rev 4072)
+++ itext/skins/schmucker/tinyvid.js	2010-02-11 07:27:05 UTC (rev 4073)
@@ -202,7 +202,9 @@
 	this.soundImg = this.baseEl.querySelector("img.soundimg");
 	
 	this.playListener=new das.EvtListener(this.baseEl.querySelector("a.play"),"click",this.play);
+	this.playListener=new das.EvtListener(this.baseEl.querySelector("a.play"),"keydown",function(e){if(e.keyCode==32){jQuery("video")[0].play();}});
 	this.stopListener=new das.EvtListener(this.baseEl.querySelector("a.stop"),"click",this.stop);
+	this.stopListener=new das.EvtListener(this.baseEl.querySelector("a.stop"),"keydown",function(e){if(e.keyCode==32){jQuery("video")[0].pause();}});
 	this.soundListener=new das.EvtListener(this.baseEl.querySelector("a.sound"),"click",this.sound);
 
 	// parse itexts and create an invisible menu for them