Obtener canvas de todos los videos

[campos22ale]

Hola, el siguiente código obtiene una captura del video y muestre en canvas.

Lo que necesito es que funcione para mas de un video y los muestre en otro, es decir que el código funcione para todos y no el video que le paso yo.

Código HTML:

<video id="video1" controls width="270" >
  <source src="mov_bbb.mp4" type='video/mp4'>
  <source src="mov_bbb.ogg" type='video/ogg'>
  <source src="mov_bbb.webm" type='video/webm'>
</video>
 
<canvas id="myCanvas"></canvas>
 

Código Javascript:

<script>
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
 
    v.addEventListener('loadeddata', function(){
    ctx.drawImage(v,5,5,260,125)},false);
    
</script>
 

[campos22ale]

Esto es lo que pude lograr hasta ahora pero me da un error.

"TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement."
es en esta linea: ctx.drawImage(v[i],5,5,260,125);
Les dejo el codigo para que me puedan ayudar. Gracias!

Código Javascript:

<script>
    var v=document.getElementsByTagName("video");   
    var canvas=document.getElementById("myCanvas");
 
    for (var i=0;i<v.length;i++){
        v[i].parentNode.insertBefore(canvas,v[i]);
        ctx=canvas.getContext('2d');
        v[i].addEventListener('loadeddata', function(){
            ctx.drawImage(v[i],5,5,260,125);
        },false);
    }
 
</script>