@@ -76,6 +76,7 @@
  void setVideo ( Video v )
  {
      video = v;
+     console.log( v );
  }
 
  /* make Processing understand the HTMLVideoElement */
 
@@ -3,7 +3,7 @@ window.onload = function () {
     video['loop'] = true;
 
     function tryFindSketch () {
-        var sketch = Processing.instances[0];
+        var sketch = Processing.getInstanceById(getProcessingSketchID());
         if ( sketch == undefined )
             return setTimeout(tryFindSketch, 200); // retry in 0.2 secs
 
@@ -16,7 +16,7 @@ window.onload = function () {
 
         (function( s, v ){
             var tryAddVideo = function () {
-                if ( v.readyState > 0 ) {
+                if ( v.readyState > 2 ) {
                     s.setVideo(v);
                 } else {
                     setTimeout(tryAddVideo, 200);
 
@@ -1,5 +1,3 @@
-/* @pjs transparent=true; */
-
 /**
  *    <p>This example shows you how to use video with a transparency
  *    which currently is not natively supported by web video formats (H264 / OGV).</p>
@@ -44,7 +42,13 @@
          PImage frame = video.getFrame();
          PImage rgbImage = frame.get(frame.width/2,0,frame.width/2,frame.height);
          PImage maskImage = frame.get(0,0,frame.width/2,frame.height);
-         rgbImage.mask(maskImage);
+         rgbImage.loadPixels();
+         maskImage.loadPixels();
+         for ( int i = 0; i < rgbImage.pixels.length; i++ )
+         {
+             rgbImage.pixels[i] = (rgbImage.pixels[i] & 0x00FFFFFF) + ((maskImage.pixels[i] & 0xFF) << 24);
+         }
+         rgbImage.updatePixels();
          image( rgbImage, width/2-rgbImage.width/2, 0 );
      }
  }
 
@@ -4,7 +4,7 @@ window.onload = function () {
 
     // try to find the Processing sketch instance, or retry
     function tryFindSketch () {
-        var sketch = Processing.instances[0];
+        var sketch = Processing.getInstanceById(getProcessingSketchID());
         if ( sketch == undefined )
             setTimeout(tryFindSketch, 200); // retry in 0.2 secs
         else
@@ -20,11 +20,20 @@ function initVideos ( sketch ) {
 
     video['loop'] = true; // as "loop" is not supported by many browsers
 
+    var lastTime = -1;
+    var lastFrame = null;
+    
     // extending our HTMLVideoElement object to return a PImage
     video['getFrame'] = function () {
-        var img = new sketch.PImage;
-        img.fromHTMLImageData(video);
-        return img;
+        if ( lastTime !== video.currentTime || !lastFrame )
+        {
+            lastFrame = new sketch.PImage;
+            lastFrame.fromHTMLImageData(video);
+            lastTime = video.currentTime;
+            return lastFrame;
+        } else {
+            return lastFrame;
+        }
     };
 
     // similar to tryFindSketch this creates a loop that
@@ -40,13 +49,17 @@ function initVideos ( sketch ) {
         tryAddVideo();
     })( sketch, video );
 
-    // force loop when set as this is currently not supported by most browsers
-    addEvent(video,'ended',function(){
-        if ( 'loop' in this && this.loop ) {
-            this.currentTime = 0;
-            this.play();
-        }
-    });
+    // this is a temporary fix for Chrome browsers sometimes not looping videos ...
+    if ( window.navigator.appVersion.toLowerCase().indexOf('chrome') >= 0 ) {
+        addEvent(video,'timeupdate',function(){
+            if ( video.currentTime == video.duration ) {
+                video.src = video.currentSrc;
+            }
+        });
+        addEvent(video,'canplay',function(){
+            video.play();
+        });
+    }
 }
 
 // http://html5demos.com/
Original file line number	Diff line number	Diff line change
@@ -76,6 +76,7 @@
76	76	void setVideo ( Video v )
77	77	{
78	78	video = v;
	79	+ console.log( v );
79	80	}
80	81
81	82	/* make Processing understand the HTMLVideoElement */