HTML5 drawimage từ video đến canvas

Question

Tôi đã cố chụp một khung hình từ video và vẽ nó trong canvas bằng HTML5, nhưng mã bên dưới không hoạt động. khi tôi nhấp vào nút bắt đầu, canvas được tô màu đen

<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

Tôi gặp vấn đề tương tự, và tôi nghĩ rằng nó phải có định dạng video. Video của tôi là H264 trong vùng chứa .mp4. Khi tôi sử dụng một video .ogg, chính xác cùng một mã đã làm việc hoàn hảo. Tôi đang sử dụng mã từ liên kết do Romin cung cấp.