javascript video canvas

Я тестирую холст и видео, и я прочитал много примеров, но у меня возникает небольшая проблема, когда я нажимаю кнопку воспроизведения на видео холсте, не воспроизвожу видео, а также просто показывает моментальный снимок.javascript video 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>

источник

2010-07-06 Jose Ortiz

Пожалуйста, переформатировать код, чтобы он легче читать. –

Я попытался выяснить, как как это сделать? Я видел пресс-контроль + k, и я видел пресс 1/0 icon –

Угадайте, что никто этого еще не сделал Книга, которую я видел в Интернете, не будет доступна новину 2010 :( –

Вы должны постоянно звонить 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; 
} 

}); 
}

источник

2010-07-15 18:10:30 antimatter15

WOW это было просто установить setTimeout Спасибо большое за помощь –

Ваша скрипка, похоже, не работает, можете ли вы обновить ее? – apaul

javascript video canvas

ответ

Смежные вопросы