将HTML5视频绘制到画布上 - Google Chrome Crash，Aw Snap [英] Draw HTML5 Video onto Canvas - Google Chrome Crash, Aw Snap

问题描述

我画了一个带有mp4文件源的视频HTML5，
为了改进CSS样式和一切，我像许多Javascript开发人员一样，以20ms的间隔将视频的帧图像重新绘制到画布上，

I drew a video HTML5 with mp4 file source, To improve css styling and everything, I redraw the frame image of the video onto canvas in 20ms interval just like many Javascript developer does,

w3schools上的示例：
上次绘图示例< a>

Example on w3schools: The Last Drawing Example

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

If you display it on IE10 or firefox it will display everything fine, But when I display it on Chrome (mine is the latest version 31), after some times it will crash (aw snap!)

任何想法为什么或有任何解决方案？

Any idea why or is there any solution to this?

推荐答案

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

Use requestAnimationFrame (rAF) instead. The 20ms makes no sense. Most video runs at 30 FPS in the US (NTSC system) and at 25 FPS in Europe (PAL system). That would be 33.3ms and 40ms respectively.

话虽如此，rAF将调试运行在60 FPS（或显示器刷新率高达60 Hz），所以我们可以

That being said, rAF will attemp to run at 60 FPS (or the monitor refresh rate up to 60 Hz) so we can reduce the frame rate here by using a toggle switch.

在任何情况下，rAF将使绘图与监视器同步，因此在任何情况下它都将是一个更好的选择 setInterval / setTimeout 。

In any case rAF will enable the drawing to be synced to the monitor so in any case it will be a better choice than setInterval/setTimeout in cases such as these.

崩溃的原因可能是由于堆栈发生（但也可能与系统相关）。

The reason you get a crash is probably due to stacking taking place (but it could also be system related).

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);
}

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

Then use this simplified version of that example:

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

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

这篇关于将HTML5视频绘制到画布上 - Google Chrome Crash，Aw Snap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！