GeezerVison is showing github.com — example: html5 video for js mode · Variablefrog/processing@ea774d5
File treeExpand file treeCollapse file tree Open diff view settings javascript/examples/HTML5/Video/atTheStation
Expand file treeCollapse file tree Open diff view settings Collapse file Copy file name to clipboard +107Lines changed: 107 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
| | 1 | +/** | | 2 | + * <video width="160" height="120"> | | 3 | + * <source src="station.mp4" /> | | 4 | + * <source src="station.ogv" /> | | 5 | + * <source src="station.webm" /> | | 6 | + * </video> | | 7 | + */ | | 8 | + | | 9 | + Video video; | | 10 | + PImage frame; | | 11 | + | | 12 | + void setup () | | 13 | + { | | 14 | + size( 320, 240 ); | | 15 | + | | 16 | + textFont(createFont("Arial", 20)); | | 17 | + noStroke(); | | 18 | + | | 19 | + textFont(createFont("Arial", 20)); | | 20 | + } | | 21 | + | | 22 | + void draw () | | 23 | + { | | 24 | + background(255); | | 25 | + | | 26 | + if ( video != null ) | | 27 | + { | | 28 | + PImage frame = getFrame(video); | | 29 | + float br = 0; | | 30 | + color px; | | 31 | + for ( int ix = 0; ix < frame.width; ix += 7 ) | | 32 | + { | | 33 | + for ( int iy = 0; iy < frame.height; iy += 7 ) | | 34 | + { | | 35 | + px = frame.pixels[ ix + iy * frame.width ]; | | 36 | + fill(px); | | 37 | + br = brightness(px); | | 38 | + br = map(br,0,255,1,14); | | 39 | + ellipse(ix*2, iy*2, br, br); | | 40 | + } | | 41 | + } | | 42 | + fill(0); | | 43 | + text(video.currentTime, 5, height-5); | | 44 | + } | | 45 | + } | | 46 | + | | 47 | + void mouseReleased () | | 48 | + { | | 49 | + if ( video != null ) | | 50 | + { | | 51 | + if ( video.paused || video.ended ) | | 52 | + { | | 53 | + video.loop = true; | | 54 | + video.play(); | | 55 | + } | | 56 | + else | | 57 | + video.pause(); | | 58 | + } | | 59 | + } | | 60 | + | | 61 | + void mouseDragged () | | 62 | + { | | 63 | + if ( video != null ) | | 64 | + { | | 65 | + video.pause(); | | 66 | + video.currentTime = map(mouseX,0,width,0,video.duration); | | 67 | + } | | 68 | + } | | 69 | + | | 70 | + /* called from JavaScript to set the freshly loaded video */ | | 71 | + void setVideo ( Video v ) | | 72 | + { | | 73 | + video = v; | | 74 | + } | | 75 | + | | 76 | + /* copy video image to PImage */ | | 77 | + PImage getFrame ( Video v ) | | 78 | + { | | 79 | + return new PImage(v); // sub-optimal .. | | 80 | + } | | 81 | + | | 82 | + /* make Processing understand the HTMLVideoElement */ | | 83 | + interface Video | | 84 | + { | | 85 | + boolean autoplay; | | 86 | + boolean controls; | | 87 | + | | 88 | + int width; | | 89 | + int height; | | 90 | + int videoWidth; /*readonly*/ | | 91 | + int videoHeight; /*readonly*/ | | 92 | + | | 93 | + boolean muted; | | 94 | + float volume; | | 95 | + | | 96 | + boolean loop; | | 97 | + boolean paused; | | 98 | + boolean ended; | | 99 | + | | 100 | + String currentSrc; | | 101 | + | | 102 | + float duration; | | 103 | + float currentTime; | | 104 | + | | 105 | + void play(); | | 106 | + void pause(); | | 107 | + } |
Collapse file Copy file name to clipboard Collapse file Copy file name to clipboard Collapse file Copy file name to clipboard Collapse file Copy file name to clipboard +40Lines changed: 40 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
| | 1 | +window.onload = function () { | | 2 | + var video = document.getElementsByTagName("video")[0]; | | 3 | + | | 4 | + addEvent(video, 'canplaythrough', function(e) { | | 5 | + tryFindSketch(); | | 6 | + }, false); | | 7 | + | | 8 | + function tryFindSketch () { | | 9 | + var sketch = Processing.instances[0]; | | 10 | + if ( sketch == undefined ) | | 11 | + return setTimeout(tryFindSketch, 200); // retry in 0.2 secs | | 12 | + | | 13 | + sketch.setVideo( video ); | | 14 | + } | | 15 | +} | | 16 | + | | 17 | +// http://html5demos.com/ | | 18 | +var addEvent = (function () { | | 19 | + if (document.addEventListener) { | | 20 | + return function (el, type, fn) { | | 21 | + if (el && el.nodeName || el === window) { | | 22 | + el.addEventListener(type, fn, false); | | 23 | + } else if (el && el.length) { | | 24 | + for (var i = 0; i < el.length; i++) { | | 25 | + addEvent(el[i], type, fn); | | 26 | + } | | 27 | + } | | 28 | + }; | | 29 | + } else { | | 30 | + return function (el, type, fn) { | | 31 | + if (el && el.nodeName || el === window) { | | 32 | + el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); | | 33 | + } else if (el && el.length) { | | 34 | + for (var i = 0; i < el.length; i++) { | | 35 | + addEvent(el[i], type, fn); | | 36 | + } | | 37 | + } | | 38 | + }; | | 39 | + } | | 40 | +})(); |
|