Firefox中使用seekToNextFrame遍历视频帧报DOMException错误如何解决？

错误原因 #

• HTMLMediaElement.seekToNextFrame()本身是返回Promise的异步API，你当前代码直接调用没有做错误捕获，也没有等待执行完成。当视频已经播放到最后一帧时，不存在可跳转的下一帧，火狐的实验性实现就会抛出该DOMException。
• 状态判定存在竞态：你在await createImageBitmap(video)完成后才判断video.ended，但createImageBitmap的异步等待期间，视频状态可能已经发生变化，或者最后一帧处理时ended属性还未完成更新，导致你判定还可以跳转，实际已经没有下一帧。

修复方案 #

你可以直接给seekToNextFrame调用加错误捕获，同时优化状态判断逻辑，修改后的process_frame函数参考如下：

async function process_frame(e) {
    const video = e.target;
    try {
        const bitmap = await createImageBitmap(video);
        ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
        // 双重判断避免状态延迟问题
        if (!video.ended && video.currentTime < video.duration) {
            await video.seekToNextFrame();        
        }
    } catch (err) {
        // 捕获边界帧跳转的异常，直接终止遍历即可
        video.removeEventListener("seeked", process_frame);
    }
}

额外优化建议：初始化video元素时添加video.preload = "auto"配置，保证视频元数据提前加载完成，避免duration属性读取不准确的问题。

内容的提问来源于stack exchange，提问作者clankill3r