JavaScript的視頻畫布

我測試了畫布和視頻，我已經對很多的例子看，但我遇到了一個小問題，當我按下視頻畫布上的播放按鈕無法播放視頻，以及它只是顯示一個快照。JavaScript的視頻畫布

我想不通爲什麼它不同時播放。這是我在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

請重新格式化您的代碼，以便它更易於閱讀。 – 2010-07-06 13:18:04

我試圖找出如何我該怎麼辦呢？只見按控制+ k和我看到按1/0圖標 – 2010-07-06 20:02:29

想沒有人做過這個尚未本書我在網上看到了這將不會提供給2010年11月:( – 2010-07-08 12:17:30

你必須不斷地打電話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的非常感謝您的幫助 – 2010-07-15 18:22:30

你的小提琴似乎並不奏效，你可以更新？ – apaul 2013-12-07 00:01:43

JavaScript的視頻畫布

回答

相關問題