HTML5 drawimage 从视频到画布

Posted

技术标签:

【中文标题】HTML5 drawimage 从视频到画布【英文标题】:HTML5 drawimage from video to canvas 【发布时间】:2012-08-28 17:03:35 【问题描述】:

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

    <video src="video2.mp4" autoplay="true" type="video/mp4"   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>

【问题讨论】:

【参考方案1】:

我遇到了完全相同的问题,我认为这与视频格式有关。我的视频是 .mp4 容器中的 H264。当我使用 .ogg 视频时,完全相同的代码可以完美运行。 我正在使用 Romin 提供的链接中的代码。

【讨论】:

以上是关于HTML5 drawimage 从视频到画布的主要内容,如果未能解决你的问题,请参考以下文章

来自视频的 HTML5 Canvas drawImage 在第一次绘制时未显示

直播 HTML5 视频绘制到画布不工作

从 HTML5 视频中获取原始像素数据

来自视频帧的画布中的drawImage改变色调

在画布html5上导入图像

HTML5 画布:图像大小调整