我试图从视频中捕获帧并使用 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>
最佳答案
我遇到了完全相同的问题,我认为这与视频格式有关。我的视频是 .mp4 容器中的 H264。当我使用 .ogg 视频时,完全相同的代码可以完美运行。 我正在使用 Romin 提供的链接中的代码。
关于HTML5 drawimage 从视频到 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12256668/