Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 drawimage from video to canvas

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>
like image 356
Manoj kumar Avatar asked Nov 04 '22 16:11

Manoj kumar


1 Answers

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.

like image 160
jairbow Avatar answered Nov 14 '22 20:11

jairbow