HTML and CSS Reference
In-Depth Information
window.onload=function() {
document.getElementById("videoobj").
addEventListener("play", drawVideo, false);
// brighten video
document.getElementById("increase").
addEventListener("click",function() {
brightness+=5;
},false);
// darken video
document.getElementById("decrease").
addEventListener("click",function() {
brightness-=5;
},false);
}
function drawVideo() {
var videoObj = document.getElementById("videoobj");
// if not playing, quit
if (videoObj.paused || videoObj.ended) return false;
// access draw canvas, create scratch canvas
var canvasObj = document.getElementById("canvasobj");
var bc = document.createElement("canvas");
bc.width=480;
bc.height=270;
// get context for both canvas objects
var ctx = canvasObj.getContext("2d");
var ctx2 = bc.getContext("2d");
// draw video on scratch canvas obj, get data
ctx2.drawImage(videoObj, 0, 0);
var pData = ctx2.getImageData(0,0,480,270);
// adjust brightness and set to display canvas
pData = adjBrightness(pData, brightness);
ctx.putImageData(pData,0,0);
setTimeout(drawVideo,20);
}
</script>
</head>
<body>
<video id="videoobj" controls width="480" height="270">
