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

Draw HTML5 Video onto Canvas - Google Chrome Crash, Aw Snap(在画布上绘制 HTML5 视频 - Google Chrome 崩溃,Aw Snap)
本文介绍了在画布上绘制 HTML5 视频 - Google Chrome 崩溃,Aw Snap的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这篇关于在画布上绘制 HTML5 视频 - Google Chrome 崩溃,Aw Snap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)