从视频到画布的HTML5 drawimage [英] HTML5 drawimage from video to canvas

问题描述

我试图从视频中捕获一帧，并使用HTML5在画布中绘制它，但下面的代码不起作用。当我点击开始按钮时，画布充满了黑色

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>

推荐答案

我有完全相同的问题，不得不与视频格式。我的视频是在.mp4容器中的H264。当我使用.ogg视频时，完全相同的代码完美运行。
我使用的是Romin提供的链接中的代码。

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.

这篇关于从视频到画布的HTML5 drawimage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！