Javascriptビデオからフレームを抽出する方法は？

Question

こんにちは私は、ファイル入力からの映像を作成し、次のJSコードを持っている：

<canvas id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas> 

<input id="videoage" type="file" name="video" class="chooseNail" accept="video/*" style="display:none;" onchange="loadSnippetThumb(event)"> 
<label for="videoage" id="labelvideo" >Choose Video</label> 

var loadSnippetThumb = function(event) {     
    var c = document.getElementById("prevImgCanvas"); 
    var context = c.getContext('2d'); 
    var url = URL.createObjectURL(event.target.files[0]); 
    var video = document.getElementById('video222'); 
    video.src = url; 
    video.autoPlay = true; 

} 

これは、ユーザーがファイル入力を使用してアップロードすることを選択したことを画面で再生する動画を作成します。私はビデオを画面に表示したくありません。ビデオのランダムなフレームを選んでキャンバスに表示したいだけです。これどうやってするの？おかげさまで

Answer 1

はseekedとloadeddataイベントにリスナーを追加し、正しいvideo.durationを得るためにloadeddataイベントにcurrentTimeを設定します。 seekedイベントが呼び出されると、この瞬間にあなたのビデオフレームを描画してしまいます。

var video = document.createElement("video"); 
 

 
var canvas = document.getElementById("prevImgCanvas"); 
 
canvas.width = window.innerWidth; 
 
canvas.height = window.innerHeight; 
 

 
video.addEventListener('loadeddata', function() { 
 
    reloadRandomFrame(); 
 
}, false); 
 

 
video.addEventListener('seeked', function() { 
 
    var context = canvas.getContext('2d'); 
 
    context.drawImage(video, 0, 0, canvas.width, canvas.height); 
 
}, false); 
 

 
var playSelectedFile = function(event) { 
 
    var file = this.files[0]; 
 
    var fileURL = URL.createObjectURL(file); 
 
    video.src = fileURL; 
 
} 
 

 
var input = document.querySelector('input'); 
 
input.addEventListener('change', playSelectedFile, false); 
 

 
function reloadRandomFrame() { 
 
    if (!isNaN(video.duration)) { 
 
    var rand = Math.round(Math.random() * video.duration * 1000) + 1; 
 
    video.currentTime = rand/1000; 
 
    } 
 
}

<input type="file" accept="video/*" /> 
 
<input type="submit" onClick="reloadRandomFrame()" value="load random frame" /><br/> 
 
<canvas id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

JSFiddle here

で同じコード