I was trying to capture a frame from video and drawing it in canvas using HTML5, but the below code is not working. when i click on the start button the canvas is filled with black color
<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>
I had the exact same problem, and I think it had to with the video format. My video was H264 in an .mp4 container. When I used an .ogg video, the exact same code worked perfectly. I'm using the code from the link that was provided by Romin.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With