Merged in the code from controls.html.

JavaPosseRoundup · Mar 27, 2012 · a61213e · a61213e
1 parent 2dcfde1
commit a61213e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 182 deletions.
diff --git a/src/main/webapp/alpha/canvas.html b/src/main/webapp/alpha/canvas.html
diff --git a/src/main/webapp/alpha/vid.js b/src/main/webapp/alpha/vid.js
diff --git a/src/main/webapp/controls.html b/src/main/webapp/controls.html
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -10,9 +10,9 @@
             <h1 class="title floatLeft marginRightLarge">Demo Video</h1>
             <div class="controls floatRight marginRightLarge">
                 <ul>
-                    <li><input type="button" value="Play" /></li>
-                    <li><input type="range" min="0" max="100" value="0" step="1" /></li>
-                    <li><span id="range">0</span></li>
+                    <li><input type="button" value="||" id="play"/></li>
+                    <li><input type="range" id="slider" min="0" max="100" value="0" step="1" onchange="setTime(this.value)"/></li>
+                    <li><span id="range">0 %</span></li>
                 </ul>
             </div>
         </div>
@@ -25,7 +25,6 @@ <h1 class="title floatLeft marginRightLarge">Demo Video</h1>
                 <canvas id="secondary" class="videoSnippet"></canvas>
             </div>
         </div>
-
     </div>
 
     <video controls>

diff --git a/src/main/webapp/scripts/html5player.js b/src/main/webapp/scripts/html5player.js
@@ -45,6 +45,32 @@ steal(  '../lib/jquery',
                 ctx.putImageData(imgData, 0, 0);
             };
 
+            $video.bind('timeupdate', function () {
+                showValue(Math.round(100 * (video.currentTime / video.duration)));
+            });
+
+            function showValue(newValue) {
+                $('#range')[0].innerHTML = newValue + " %";
+                $('#slider')[0].value = newValue;
+            }
+
+            function setTime(newValue) {
+                $('#range')[0].innerHTML = newValue;
+                video.currentTime = Math.round(video.duration * newValue / 100);
+                showValue(newValue);
+            }
+
+            function playControl() {
+                if (video.paused == false) {
+                    video.pause();
+                    $('#play')[0].value = '>';
+                } else {
+                    video.play();
+                    $('#play')[0].value = '||';
+                }
+            }
+            $('#play').click(playControl);
+
 
         initializeCanvases = function () {
             var renderFrame;

diff --git a/src/main/webapp/style/main.css b/src/main/webapp/style/main.css
@@ -205,4 +205,5 @@ video { display: none; }
 
 .bigText {
    	font-size: large;
-   }
+}
+