HTML5从视频中绘制图像到画布

Question

我试着使用HTML5从视频中捕获并绘制一帧到canvas上，但下面的代码没有起作用。当我点击开始按钮时，canvas被填充了黑色。

    <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>

- Manoj kumar

Answer 1

我曾经遇到过同样的问题，我认为这可能与视频格式有关。我的视频是H264格式，存储在.mp4容器中。当我使用.ogg视频时，完全相同的代码可以正常工作。 我正在使用Romin提供的链接中的代码。

- jairbow