<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<script language=”javascript”>
function changeColor(newColor) {
var elem = document.getElementById(‘h1’);
elem.style.color = newColor;
}
function drawVideo(){
var video = document.getElementById(“v”);
var canvas = document.getElementById(“c”);
canvas.getContext(“2d”).drawImage(video, 0, 0, 480, 270);
}
function drawVideoBW(){
var video = document.getElementById(“v”);
setInterval(function(){
var canvas = document.getElementById(“c”);
var ctx = canvas.getContext(“2d”);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);
for (var i = 0; i < src.data.length; i=i+4) {
var y = ~~((src.data[i] + src.data[i + 1] + src.data[i + 2])/3);
src.data[i] = src.data[i+1] = src.data[i+2] = y;
src.data[i+3] = src.data[i+3];
}
ctx.putImageData(src, 0, 0);
}, 1000/30);
}
</script>
<h1 id=”h1″>Video 白黒化</h1>
<button onclick=”changeColor(‘blue’);”>blue</button>
<div>
<video id=v preload=’none’ onclick=’this.play();’ controls>
<source src=’test2.mp4′>
</video>
</div>
<div>
<button onClick=”drawVideo()”>Draw Color</button>
</div>
<div>
<button onClick=”drawVideoBW()”>Draw BW</button>
</div>
<div>
<canvas id=”c” width=”320″ height=”180″></canvas>
</div>
</body>
</html>