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

时间:2013-12-02 15:46:29

标签: javascript html5 canvas html5-canvas html5-video

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

w3schools的例子: The Last Drawing Example

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

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

1 个答案:

答案 0 :(得分: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);