JavaScript 视频画布

发布于 2024-09-08 08:06:38 字数 1180 浏览 1 评论 0原文

我正在测试画布和视频，并且已经阅读了很多示例，但是当我按下视频画布上的播放按钮时，我遇到了一个小问题，它不能播放视频，它只显示快照。

我不明白为什么它不能同时播放。这是我的 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>

原文

I am testing out canvas and video and I have read up on alot of examples, but I am running into a slight problem when I press the play button on the video canvas doesn't play the video as well it just shows a snapshot.

I can not figure out why it doesn't play simultaneously. Here is my code in 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阳光下慵懒的猫 2024-09-15 08:06:39

您必须连续调用 conts.drawImage

示例： http://jsfiddle.net/Dmy2E/

    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;
}

}); 
}

You have to continuously call conts.drawImage

Example: http://jsfiddle.net/Dmy2E/

    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;
}

}); 
}

回复收藏 0 原文

~没有更多了~