Advanced Media Element Scripting - HTML5 Media - page 130

<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
</video>
<canvas id="canvasobj" width="480" height="270"></canvas>
<div>
<button id="increase">Increase brightness</button>
<button id="decrease">Decrease brightness</button>
</body>
The use of the brightness filter works with Firefox, Webkit Nightly, and IE10. You can adjust
the filter in Opera but you get truly bizarre results if you do.
To incorporate this functionality as part of your custom control, hide the video and display
the canvas element, instead. Figure 4-3 shows the brightness filter in action. The top picture
is from the video, and the bottom picture is the brightness-adjusted canvas. I actually think
the brightness-adjusted canvas is an improvement. Also notice in the image a slight lag in the
video playback, even with our improved event handling.