在画布上绘制 HTML5 视频 - Google Chrome 崩溃，Aw Snap

2022-01-17 00:00:00 canvas javascript html html5-canvas html5-video

我用mp4文件源画了一个视频HTML5，为了改进 css 样式和所有内容，我像许多 Javascript 开发人员一样，每隔 20 毫秒将视频的帧图像重绘到画布上，

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 的示例:最后的绘图示例

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 没有意义.大多数视频在美国以 30 FPS(NTSC 系统)运行，在欧洲以 25 FPS(PAL 系统)运行.那将分别是 33.3 毫秒和 40 毫秒.

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

相关文章