canvas - 限制 HTML <video> 元素的帧速率

Question

是否可以通过JS或其他方式限制<video>的FPS元素？我已经确定它可能需要绘制到 <canvas> ，但是如何限制 <canvas> 上每秒绘制的帧数？

Answer 1

足够简单。实现任何类型的视频/ Canvas 效果的最佳方法是从 requestAnimationFrame 开始，然后在每个周期中，您可以选择是否绘制帧或跳过它。假设 2D Canvas 具有最大兼容性，如下所示:

var MAX_FRAME_RATE = 5, // frames per second
    FRAME_DIFF = 1000 / MAX_FRAME_RATE,
    canvas = document.getElementById('canvas'),
    video = document.getElementById('video'),
    ctx = canvas.getContext('2d'),
    lastDraw = 0;

function render() {
    var now = Date.now(),
        diff = now - lastDraw;

    if (diff >= FRAME_DIFF) {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        lastDraw = now;
    }

    requestAnimationFrame(render);
}

render();