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

Question

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

Answer 1

足够简单。进行任何类型的视频/画布效果的最佳方法是从requestAnimationFrame开始，然后在每个循环中，您可以选择是绘制帧还是跳过它。假设2D画布具有最大兼容性，如下所示：

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