동영상에서 캔버스로 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에서 제공 한 링크의 코드를 사용하고 있습니다.