HTML5とJavaScriptでビデオからフレームをキャプチャする

Question

5秒ごとにビデオからフレームをキャプチャしたい。

これは私のJavaScriptコードです：

video.addEventListener('loadeddata', function() { 
    var duration = video.duration; 
    var i = 0; 

    var interval = setInterval(function() { 
     video.currentTime = i; 
     generateThumbnail(i); 
     i = i+5; 
     if (i > duration) clearInterval(interval); 
    }, 300); 
}); 

function generateThumbnail(i) {  
    //generate thumbnail URL data 
    var context = thecanvas.getContext('2d'); 
    context.drawImage(video, 0, 0, 220, 150); 
    var dataURL = thecanvas.toDataURL(); 

    //create img 
    var img = document.createElement('img'); 
    img.setAttribute('src', dataURL); 

    //append img in container div 
    document.getElementById('thumbnailContainer').appendChild(img); 
} 

私が持っている問題が発生した第一二つの画像では同じであり、期間-5秒の画像が生成されていません。サムネイルは特定の時間のビデオフレームが< video>タグで表示される前に生成されていることがわかりました。

たとえば、video.currentTime = 5とすると、フレーム0のイメージが生成されます。その後、ビデオフレームは時間5sにジャンプする。したがって、video.currentTime = 10の場合、フレーム5の画像が生成されます。

Answer 1

原因

問題は、（それがcurrentTimeだ設定することで）ビデオを求めていることは、非同期であるということです。

あなたはseekedイベントを聞く必要があります。そうしないと、あなたの古い価値である可能性のある実際の現在のフレームを取得する危険があります。

非同期のため、setInterval()も非同期で使用してはいけません。また、次のフレームがシークされるときに正しく同期することができません。 setInterval()を使用する必要はありません。代わりにseekedイベントを利用するため、すべてが同期した状態を維持します。このイベントは、我々は我々が設定することによって要求されたフレームで実際にあることを私たちに保証して、あなたが正しいのフレームをキャプチャするためにビデオを通過するseekedイベントを使用することができ、再書き込みコード少しずつ

ソリューション

currentTimeプロパティ。

例

// global or parent scope of handlers 
var video = document.getElementById("video"); // added for clarity: this is needed 
var i = 0; 

video.addEventListener('loadeddata', function() { 
    this.currentTime = i; 
}); 

はパーティーに、このイベントハンドラを追加します。

video.addEventListener('seeked', function() { 

    // now video has seeked and current frames will show 
    // at the time as we expect 
    generateThumbnail(i); 

    // when frame is captured increase, here by 5 seconds 
    i += 5; 

    // if we are not passed end, seek to next interval 
    if (i <= this.duration) { 
     // this will trigger another seeked event 
     this.currentTime = i; 
    } 
    else { 
     // Done!, next action 
    } 
}); 

Demo here