ビデオからキャンバスへのHTML5描画画像

Question

ビデオからフレームをキャプチャし、HTML5を使用してキャンバスに描画しようとしましたが、以下のコードは機能しません。スタートボタンの上に私をクリックすると、キャンバスが黒

<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

で満たされて、私は正確に同じ問題を抱えていた、と私はそれがビデオフォーマットとしていたと思います。私のビデオは.mp4コンテナでH264でした。 .oggビデオを使用したとき、まったく同じコードが完全に機能しました。 私はRominによって提供されたリンクのコードを使用しています。