From eace98f0ef1955e25e561af8efef3de2efb9d07c Mon Sep 17 00:00:00 2001
From: fjenett <fjenett@gmail.com>
Date: Sat, 11 Jun 2011 10:20:01 +0000
Subject: [PATCH] example: html5 video for js mode

---
 .../HTML5/Video/atTheStation/atTheStation.pde | 107 ++++++++++++++++++
 .../examples/HTML5/Video/atTheStation/mov.js  |  40 +++++++
 2 files changed, 147 insertions(+)
 create mode 100644 javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
 create mode 100644 javascript/examples/HTML5/Video/atTheStation/mov.js

diff --git a/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde b/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
new file mode 100644
index 000000000..d5849b7a7
--- /dev/null
+++ b/javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
@@ -0,0 +1,107 @@
+/**
+ *    <video width="160" height="120">
+ *        <source src="station.mp4" />
+ *        <source src="station.ogv" />
+ *        <source src="station.webm" />
+ *    </video>
+ */
+ 
+ Video video;
+ PImage frame;
+ 
+ void setup ()
+ {
+     size( 320, 240 );
+     
+     textFont(createFont("Arial", 20));
+     noStroke();
+     
+     textFont(createFont("Arial", 20));
+ }
+ 
+ void draw ()
+ {
+     background(255);
+     
+     if ( video != null )
+     {
+         PImage frame = getFrame(video);
+         float br = 0;
+         color px;
+         for ( int ix = 0; ix < frame.width; ix += 7 )
+         {
+             for ( int iy = 0; iy < frame.height; iy += 7 )
+             {
+                 px = frame.pixels[ ix + iy * frame.width ];
+                 fill(px);
+                 br = brightness(px);
+                 br = map(br,0,255,1,14);
+                 ellipse(ix*2, iy*2, br, br);
+             }
+         }
+         fill(0);
+         text(video.currentTime, 5, height-5);
+     }
+ }
+ 
+ void mouseReleased ()
+ {
+     if ( video != null )
+     {
+         if ( video.paused || video.ended )
+         {
+             video.loop = true;
+             video.play();
+         }
+         else
+             video.pause();
+     }
+ }
+ 
+ void mouseDragged ()
+ {
+     if ( video != null )
+     {
+         video.pause();
+         video.currentTime = map(mouseX,0,width,0,video.duration);
+     }
+ }
+ 
+ /* called from JavaScript to set the freshly loaded video */
+ void setVideo ( Video v )
+ {
+     video = v;
+ }
+ 
+ /* copy video image to PImage */
+ PImage getFrame ( Video v )
+ {
+     return new PImage(v); // sub-optimal ..
+ }
+ 
+ /* make Processing understand the HTMLVideoElement */
+ interface Video
+ {
+     boolean autoplay;
+     boolean controls;
+     
+     int width;
+     int height;
+     int videoWidth; /*readonly*/
+     int videoHeight; /*readonly*/
+     
+     boolean muted;
+     float volume;
+     
+     boolean loop;
+     boolean paused;
+     boolean ended;
+     
+     String currentSrc;
+     
+     float duration;
+     float currentTime;
+     
+     void play();
+     void pause();
+ }
diff --git a/javascript/examples/HTML5/Video/atTheStation/mov.js b/javascript/examples/HTML5/Video/atTheStation/mov.js
new file mode 100644
index 000000000..2d17c41a7
--- /dev/null
+++ b/javascript/examples/HTML5/Video/atTheStation/mov.js
@@ -0,0 +1,40 @@
+window.onload = function () {
+    var video = document.getElementsByTagName("video")[0];
+    
+    addEvent(video, 'canplaythrough', function(e) {
+        tryFindSketch();
+    }, false);
+    
+    function tryFindSketch () {
+        var sketch = Processing.instances[0];
+        if ( sketch == undefined )
+            return setTimeout(tryFindSketch, 200); // retry in 0.2 secs
+
+        sketch.setVideo( video );
+    }
+}
+
+// http://html5demos.com/
+var addEvent = (function () {
+  if (document.addEventListener) {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.addEventListener(type, fn, false);
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  } else {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  }
+})();