एचटीएमएल 5 से वीडियो से कैनवास

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 वीडियो का उपयोग किया, तो सटीक उसी कोड ने पूरी तरह से काम किया। मैं रोमिन द्वारा प्रदान किए गए लिंक से कोड का उपयोग कर रहा हूं।