Advanced Media Element Scripting - HTML5 Media - page 125

The filter function we're using is one that's also been used with still images and the canvas
element. It's basically a desaturation of the color to create a grayscale effect. I modified a filter
for still images I found at the HTML5 Rocks web site. It's very similar to the same filter used
in the HTML5 Doctor article:
function grayScale(pixels) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
}
The canvas pixel data is sent to the filter, which does the grayscale conversion and then returns
the data. Example 4-3 shows the script block incorporating the new filter.
Example4-3.Using a scratch canvas to create a grayscale of the video
<script>
// grayscale filter
function grayScale(pixels) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
}
// event listeners
window.onload=function() {
document.getElementById("videoobj").
addEventListener("play", drawVideo, false);
}
// draw the video
function drawVideo() {
var videoObj = document.getElementById("videoobj");