在Chrome（Android）上将视频绘制到画布

我尝试将视频帧复制到画布上。我正在Android tablette（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

---

有什么想法吗？

有几件事需要考虑：

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

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