我画了一个带有mp4文件源的视频HTML5, 为了改善css样式和所有内容,我将视频的帧图像以20ms的间隔重绘到画布上,就像许多Javascript开发人员一样,
w3schools的例子: The Last Drawing Example
如果你在IE10或firefox上显示它会显示一切正常, 但是当我在Chrome上显示它时(我的是最新版本31), 经过一段时间它会崩溃(快速!)
知道为什么或有什么解决方案吗?
答案 0 :(得分:1)
请改用requestAnimationFrame
(rAF)。 20毫秒毫无意义。大多数视频在美国(NTSC系统)以30 FPS运行,在欧洲以25 FPS(PAL系统)运行。那将分别是33.3ms和40ms。
话虽如此,rAF将尝试以60 FPS(或显示器刷新率高达60 Hz)运行,因此我们可以通过使用切换开关来降低帧速率。
在任何情况下,rAF都会将绘图同步到监视器,因此在任何情况下,如果出现这种情况,它将比setInterval
/ setTimeout
更好。
您遇到崩溃的原因可能是由于堆叠发生(但也可能与系统有关)。
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);