我正在测试 Canvas 和视频，我已经阅读了很多示例，但是当我按下视频 Canvas 上的播放按钮时我遇到了一个小问题，它也没有播放视频，它只是显示了一个快照。
我不明白为什么它不能同时播放。这是我在 javascript 中的代码。
function draw()
{
var ctx3 = document.getElementById('c3');
var ctx1 = document.getElementById('c1');
var conts = ctx3.getContext('2d');
var videos = document.getElementById('video');
var frames = conts.getImageData(0,0,300,300);
videos.addEventListener("play", function ()
{
conts.drawImage(videos, 0, 0, 300, 300);
var l = frames.data.length/4;
for (var i = 0; i<1; i++){
var r = frames.data(i * 4 + 0);
var g = frames.data(i * 4 + 1);
var b = frames.data(i * 4 + 2);
if (g > 100 && r > 100 && b < 43)
frames.data(i * 4 + 3) = 0;
ctx1.putImageData(frames,300,300);
return;
}
});
}
</script>
<body onload="draw()">
<canvas id="c1" width="300" height="300"></canvas>
<canvas id="c2" width="300" height="300" ></canvas>
<canvas id="c3" width="300" height="300"></canvas>
<video id="video" src="https://developer.mozilla.org/samples/video/chroma-key/video.ogv" width=video.width height= video.height controls="true"></video>
</body>
最佳答案
你必须连续调用 conts.drawImage
function draw()
{
var ctx3 = document.getElementById('c3');
var ctx1 = document.getElementById('c1');
var conts = ctx3.getContext('2d');
var videos = document.getElementById('video');
var frames = conts.getImageData(0,0,300,300);
videos.addEventListener("play", function ()
{
conts.drawImage(videos, 0, 0, 300, 300);
setTimeout(arguments.callee, 0);
var l = frames.data.length/4;
for (var i = 0; i<1; i++){
var r = frames.data(i * 4 + 0);
var g = frames.data(i * 4 + 1);
var b = frames.data(i * 4 + 2);
if (g > 100 && r > 100 && b < 43)
frames.data(i * 4 + 3) = 0;
ctx1.putImageData(frames,300,300);
return;
}
});
}
关于javascript视频 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3186463/