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

Question

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

有任何想法吗 ？

Answer 1

需要注意的几件事：

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