Question

我画了一个带有mp4文件源的视频HTML5，为了改善css样式和所有内容，我将视频的帧图像以20ms的间隔重绘到画布上，就像许多Javascript开发人员一样，

w3schools的例子： The Last Drawing Example

如果你在IE10或firefox上显示它会显示一切正常，但是当我在Chrome上显示它时（我的是最新版本31），经过一段时间它会崩溃（快速！）

知道为什么或有什么解决方案吗？

Answer 1

请改用requestAnimationFrame（rAF）。 20毫秒毫无意义。大多数视频在美国（NTSC系统）以30 FPS运行，在欧洲以25 FPS（PAL系统）运行。那将分别是33.3ms和40ms。

话虽如此，rAF将尝试以60 FPS（或显示器刷新率高达60 Hz）运行，因此我们可以通过使用切换开关来降低帧速率。

在任何情况下，rAF都会将绘图同步到监视器，因此在任何情况下，如果出现这种情况，它将比setInterval / setTimeout更好。

您遇到崩溃的原因可能是由于堆叠发生（但也可能与系统有关）。

DEMO

var toggle = true;

function loop() {

    toggle = !toggle;
    if (toggle) {
        if (!v.paused) requestAnimationFrame(loop);
        return;
    }

    /// draw video frame every 1/30 frame
    ctx.drawImage(v, 0, 0);

    /// loop if video is playing
    if (!v.paused) requestAnimationFrame(loop);
}

然后使用该示例的简化版本：

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');

v.addEventListener('play', loop ,false);

将HTML5视频绘制到Canvas上 - Google Chrome Crash，Aw Snap

1 个答案:

DEMO