HTML5 drawimage de video a lienzo

Question

Estaba tratando de capturar un fotograma de un video y dibujarlo en un lienzo usando HTML5, pero el siguiente código no funciona. cuando hago clic en el botón de inicio del lienzo se llena con el color negro

<video src="video2.mp4" autoplay="true" type="video/mp4" width="300" height="200" id="vid"> 
     </video> 
     <canvas id="cvs"> </canvas> 
     <button onclick="start()">Start</button> 
     <script> 
     var video=document.getElementById("vid"); 
     var cvs=document.getElementById("cvs"); 
     function start(){ 
     cvs.getContext("2d").drawImage(video, 0, 0, 300,200); 
     } 
</script> 

Answer 1

que tenía exactamente el mismo problema, y ​​creo que tuvo que con el formato de vídeo. Mi video era H264 en un contenedor .mp4. Cuando usé un video .ogg, el mismo código funcionaba perfectamente. Estoy usando el código del enlace proporcionado por Romin.