在 Chrome (Android) 上将视频绘制到画布上答案

【问题标题】：Draw video to canvas on Chrome (Android)在 Chrome (Android) 上将视频绘制到画布上
【发布时间】：2017-02-14 13:34:33
【问题描述】：

我尝试将视频帧复制到我的画布。我在 Android 平板电脑 (v4.4.4) 上使用 Chrome (v46)。

第一帧画得很好，但第二帧画得不好。

JS：

document.addEventListener('DOMContentLoaded',function() {

            var canvas = document.getElementById('canvas');

            var ctx = canvas.getContext('2d');

            var video = document.getElementById('video');

            video.addEventListener('timeupdate',function(){
               ctx.drawImage(video,0,0);
            },false);

    },false);

HTML

<video id="video" autoplay controls muted preload>
    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
</video>

有什么想法吗？

【问题讨论】：

标签： android google-chrome video canvas frame

【解决方案1】：

有几点需要注意：

我不确定您是如何在 HTML 中设置画布的，但一个明显的可能问题是缩放问题 - 即，如果画布大小不同，则缩放后的视频可能会降低质量。
“时间更新”回调可能不像您需要的那样定期 - 我见过的大多数将视频写入画布的示例都设置了明确的计时器。我不确定为什么这会影响质量，但可能值得一试。
您正在使用的特定视频的第一帧很简单，因为它主要是文本，这可能会再次影响播放的外观

【讨论】：