3

ここのような画像としてビデオフレームをキャプチャしようとしています:

http://appcropolis.com/using-html5-canvas-to-capture-frames-from-a-video/

私の簡単なコード:

var video = document.getElementById("video");
var bottom = document.getElementById("bottom"); 


var canvas = document.createElement('canvas');

canvas.width  = 500;
canvas.height = 282;

var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 282); 

bottom.innerHTML = '';
bottom.appendChild(canvas);

IEではうまく機能しますが、Chromeでは常に黒いキャンバスが表示されます...

デモはこちら:

http://html5-canvas-test.vipserv.org/

これを修正する方法はありますか？

4

2 に答える 2

1

私にとってChromeで完璧に動作します！

ただし、ビデオを開始する必要があります。ビデオが開始されていないと、黒い画面が表示されます。

于 2012-10-08T11:45:29.563 に答える
0

イベント「seeked」を使用する必要があります。

$(video).seeked(function() {
    ctx.drawImage(video, 0, 0, 500, 282); 
});

私の英語でごめんなさい、私はフランス人です

于 2013-03-08T19:25:29.207 に答える