Question

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

第一帧画好，但另一帧不是。

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中设置画布的，但一个明显可能的问题是缩放 - 即如果画布大小与视频大小不同，那么缩放可能会降低质量。
“时间更新”回调可能不像您需要的那样常规 - 大多数将视频写入画布的示例我已经看过设置了一个明确的计时器。我不确定为什么这会影响质量，但值得一试。
您使用的特定视频有一个简单的第一帧，因为它主要是文字，这可能会影响播放的外观

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

1 个答案: