Firefox中如何优雅捕获HTML5视频的NS_ERROR_DOM_MEDIA_ABORT_ERR异常？

问题现象 #

在Firefox环境中，当HTML5视频加载大体积视频且网络缓慢时，若在视频未完全加载时播放并跳转进度，会抛出未捕获的Promise异常：

Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request.

预设环境 #

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

代码示例 #

<video controls>
  <source src="http://help.de/somelargevideo.mp4" type="video/mp4">
</video>

复现步骤 #

• 将网络限速调至最低档位
• 拖动视频进度条到任意位置
• 点击播放按钮
• 在视频加载完成前，再次拖动进度条到更早的位置

现状与诉求 #

原本预期Firefox会像Chrome一样内部处理该场景，或触发abort事件（毕竟这是用户主动触发的中止操作），但实际并未触发，导致异常暴露。现寻求无需自定义控件的优雅捕获方案。

解决方案 #

针对Firefox未触发abort事件、仅通过未捕获Promise抛出异常的情况，可通过以下两种无需自定义控件的方式处理：

方案1：全局兜底捕获未处理的Promise拒绝 #

监听全局unhandledrejection事件，过滤出视频资源中止的特定异常并静默处理：

window.addEventListener('unhandledrejection', (event) => {
  if (event.reason instanceof DOMException && 
      event.reason.message.includes('The fetching process for the media resource was aborted')) {
    // 标记异常已处理，避免控制台报错
    event.preventDefault();
  }
});

方案2：针对视频元素精准捕获 #

重写视频元素的play方法，为其添加异常捕获逻辑，不影响原生控件使用：

const video = document.querySelector('video');
const originalPlay = video.play;

video.play = function() {
  return originalPlay.call(this).catch((err) => {
    if (err instanceof DOMException && 
        err.message.includes('The fetching process for the media resource was aborted')) {
      // 静默处理该特定异常
      return;
    }
    // 重新抛出其他未预期的异常
    throw err;
  });
};

方案说明 #

• 方案1为全局兜底，能覆盖页面所有视频元素的此类异常，但需注意不要误处理其他业务相关的Promise拒绝。
• 方案2更精准，仅针对目标视频生效，不会干扰全局其他逻辑。
• 两种方案均基于原生控件实现，无需自定义播放/进度控件。

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