-
requestVideoFrameCallback() 的用法与 Window.requestAnimationFrame() 相同。您可以使用它来运行一个回调函数，该函数在下一个视频帧发送到合成器时执行某些操作。当合成下一个视频帧时，再次调用 requestVideoFrameCallback() 以运行回调，以此类推，回调结束
-
requestVideoFrameCallback() 提供对每个单独视频帧的可靠访问。
requestAnimationFrame() 尝试匹配显示刷新率，通常为60 Hz。另一方面，requestVideoFrameCallback() 尝试匹配视频帧速率。更具体地说，回调将以视频帧速率和浏览器绘画刷新速率中的较低者运行。例如，在以60Hz绘制的浏览器中播放帧速率为25fps的视频将以25Hz的速率触发回调。在同一个60 Hz浏览器中运行的帧速率为120 fps的视频将以60 Hz的频率触发回调。
-
requestVideoFrameCallback() 在回调函数中提供有用的视频元数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.video,
.canvas {
width: 420px;
height: auto;
box-sizing: border-box;
}
</style>
</head>
<body>
<video src="./frag_bunny.mp4" controls audooplay muted loop class="video"></video>
<canvas class="canvas"></canvas>
<script>
/** @type {HTMLVideoElement} */
const video = document.querySelector('.video');
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector('.canvas');
/** @type {CanvasRenderingContext2D} */
const ctx = canvas.getContext('2d');
video.addEventListener('loadedmetadata', () => {
if (video.videoWidth < video.offsetWidth) {
canvas.width = video.offsetWidth * devicePixelRatio;
canvas.height = video.offsetHeight * devicePixelRatio;
} else {
canvas.width = video.videoWidth * devicePixelRatio;
canvas.height = video.videoHeight * devicePixelRatio;
}
});
function drawFrame() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
video.requestVideoFrameCallback((now, metadata) => {
// console.log('frame', now, metadata.mediaTime);
drawFrame();
});
}
requestAnimationFrame(drawFrame);
</script>
</body>
</html>
