ビデオからスクリーンショットを取ってキャンバスとJSに入れてください

Question

私はDOMからすべてのビデオを取得しようとしています（かなりの数）、各ビデオのスクリーンショットを撮り、それぞれを別のキャンバスに入れようとしています。 JSFiddleここ

これは私の試みですが、それは、このエラーを与える：

---

Uncaught TypeError: Cannot read property 'getContext' of undefined

---

私は問題を解決することができますどのように任意のアイデアを？

var videoArray = []; 
    var canvasArray = []; 
    var c = jQuery('<canvas/>',{'width':373.64,'height':227.88}); //set canvas 

    jQuery('body').append(c); //append canvas to body 

    // push each video into an array 
    jQuery('video').each(function(){ 
     videoArray.push(this); 
    }); 

    //push each canvas into an array 
    jQuery('canvas').each(function(){ 
     canvasArray.push(this); 

    }); 
    //for each video in the array, take a snapshot of the video at position i and draw it 
    for(var i = 0; i < videoArray.length; i++){ 
     canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300,200); 

    } 

Answer 1

私は解決策を見つけました。私のコードでは、変数cを作成し、その中にキャンバスを作成しています。次は、このキャンバスを体に入れることですが、私はそれを一度入れます。次に、同じキャンバスに画像を描画します。新しいソリューションは、ビデオごとにキャンバスを作成することです。これは更新されたJSFiddleです。これが関心のあるコードです。

var videoArray = []; 
var canvasArray = []; 
var c = jQuery('<canvas/>', { 
    'width': 373.64, 
    'height': 227.88 
}); //set canvas 

//insert a canvas in each div 
jQuery('.wrapper').each(function(){ 
    jQuery('<canvas/>', { 
     'width': 373.64, 
     'height': 227.88 
    }).appendTo('.wrapper');//append canvas to body 
}); 


// push each video into an array 
jQuery('video').each(function() { 
    videoArray.push(this); 
}); 

//push each canvas into an array 
jQuery('canvas').each(function() { 
    canvasArray.push(this); 

}); 
//for each video in the array, take a snapshot of the video at position i and draw it 
for (var i = 0; i < videoArray.length; i++) { 
    canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300, 200); 

}