js mode example cleanups

javascript/examples/HTML5/Video/atTheStation/atTheStation.pde

@@ -1,5 +1,5 @@
 /**
- *    <video width="160" height="120">
+ *    <video width="160" height="120" style="display:none">
  *        <source src="station.mp4" />
  *        <source src="station.ogv" />
  *        <source src="station.webm" />
@@ -13,7 +13,6 @@
  {
      size( 320, 240 );
      
-     textFont(createFont("Arial", 20));
      noStroke();
      
      textFont(createFont("Arial", 20));
@@ -39,32 +38,37 @@
                  ellipse(ix*2, iy*2, br, br);
              }
          }
-         fill(0);
-         text(video.currentTime, 5, height-5);
+         
+         fill(200);
+         rect(5,height-5-20,width-10,20);
+         fill(100);
+         rect(5,height-5-20,
+              map(video.currentTime,0,video.duration,0,width-10),
+              20);
+     }
+ }
+ 
+ boolean wasDragged = false;
+ void mouseDragged ()
+ {
+     if ( video != null )
+     {
+         video.currentTime = map(constrain(mouseX,0,width-10),0,width-10,0,video.duration);
+         wasDragged = true;
+         video.pause();
      }
  }
  
  void mouseReleased ()
  {
-     if ( video != null )
+     if ( video != null && !wasDragged )
      {
-         if ( video.paused || video.ended )
-         {
-             video.loop = true;
+         if ( video.paused )
              video.play();
-         }
          else
              video.pause();
      }
- }
- 
- void mouseDragged ()
- {
-     if ( video != null )
-     {
-         video.pause();
-         video.currentTime = map(mouseX,0,width,0,video.duration);
-     }
+     wasDragged = false;
  }
  
  /* called from JavaScript to set the freshly loaded video */

javascript/examples/HTML5/Video/atTheStation/mov.js

@@ -1,17 +1,32 @@
 window.onload = function () {
     var video = document.getElementsByTagName("video")[0];
-    
-    addEvent(video, 'canplaythrough', function(e) {
-        tryFindSketch();
-    }, false);
+    video['loop'] = true;
     
     function tryFindSketch () {
         var sketch = Processing.instances[0];
         if ( sketch == undefined )
             return setTimeout(tryFindSketch, 200); // retry in 0.2 secs
 
-        sketch.setVideo( video );
+        (function( s, v ){
+            var tryAddVideo = function () {
+                if ( v.readyState > 0 ) {
+                    s.setVideo(v);
+                } else {
+                    setTimeout(tryAddVideo, 200);
+                }
+            }
+            tryAddVideo();
+        })( sketch, video );
     }
+    
+    addEvent(video,'ended',function(){
+        if ( 'loop' in this && this.loop ) {
+            this.currentTime = 0;
+            this.play();
+        }
+    });
+    
+    tryFindSketch();
 }
 
 // http://html5demos.com/