将视频画到Chrome上的画布（Android）

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

第一帧很好画，但其他没有。

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>

任何想法？

来源

2017-02-14 Adrien Castagliola

几件事情来看待：

我不知道你是如何设置画布在你的HTML，但一个明显的可能的问题是与缩放 - 即如果画布大小是不同尺寸的视频缩放可能会降低质量。
'时间更新'回调可能不像您需要的那样规则 - 大多数将视频写入画布的示例中我已经看到了设置明确的计时器。我不确定为什么这会影响质量，但可能值得一玩。
您正在使用的特定视频有一个简单的第一帧，因为它大部分是文字，这可能会影响播放的外观

来源

2017-02-17 12:55:02 Mick

将视频画到Chrome上的画布（Android）

回答

相关问题