Skip to content

Instantly share code, notes, and snippets.

/jsbin.ImohifA.html

Created November 4, 2013 05:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save anonymous/7298357 to your computer and use it in GitHub Desktop.
Save anonymous/7298357 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.ImohifA.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Black and White</title>
<style>
body {
background: black;
color:#CCCCCC;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
</head>
<body onload="processor.doLoad()">
<div>
<video id="video" controls="true" width="480" height="270">
<source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"/>
<source src="http://jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv" type="video/ogg"/>
<source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"/>
</video>
</div>
<div>
<canvas id="c1" width="480" height="270"></canvas>
</div>
<div style="clear:both">
<label for="cb1">Black &amp; White</label><input id="cb1" name="cb1" type="checkbox"/>
</div>
</body>
</html>
Raw
jsbin.ImohifA.js
var processor = {
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
var self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.cb1 = document.getElementById("cb1");
var self = this;
this.video.addEventListener("play", function() {
self.width = self.video.width; // self.video.videoWidth;
self.height = self.video.height; // self.video.videoHeight;
self.timerCallback();
}, false);
},
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
var l = frame.data.length / 4;
if(this.cb1.checked) {
for (var i = 0; i < l; i++) {
var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
frame.data[i * 4 + 0] = grey;
frame.data[i * 4 + 1] = grey;
frame.data[i * 4 + 2] = grey;
}
this.ctx1.putImageData(frame, 0, 0);
}
return;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment