Firefox中Hover触发视频播放出现Uncaught (in promise) DOMException问题求助

问题概述 #

开发的网页实现了鼠标悬停指定区域时播放背景视频、移出时暂停的功能，但部分视频在Firefox中悬停时无法播放，抛出错误：

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

该问题仅在Firefox中出现，Chrome中功能正常。

问题原因 #

1. 异步错误未捕获：video.play()返回Promise对象，原代码使用同步try-catch无法捕获其reject状态，导致Firefox的DOMException未被处理。
2. Firefox加载策略限制：Firefox对不可见（如z-index:-1）的媒体资源会自动中止加载，未明确预加载策略时容易触发该错误。
3. 资源加载不完整：部分视频可能因网络或缓存问题，首次调用play()时未完成加载，导致播放失败。

解决方案 #

1. 处理异步播放错误 #

使用async/await配合try-catch捕获play()的Promise错误，并在失败时尝试重新加载视频。

2. 明确视频预加载策略 #

给video标签添加preload="auto"属性，确保浏览器预加载必要的媒体数据。

3. 等待视频可播放后再触发播放 #

检查视频的readyState，确保视频已加载到可播放状态再调用play()。

修改后的代码示例 #

JavaScript #

const videos = document.querySelectorAll(".bckg");
const hoverAreas = document.querySelectorAll(".yt-links");

hoverAreas.forEach((area, index) => {
  // 鼠标悬停播放视频
  area.addEventListener("mouseover", async () => {
    const video = videos[index];
    try {
      // 等待视频加载到可播放状态
      if (video.readyState < 2) {
        await new Promise(resolve => video.addEventListener('canplay', resolve, { once: true }));
      }
      await video.play();
    } catch (e) {
      console.error("视频播放失败:", e);
      // 重新加载并尝试播放
      video.load();
      await video.play();
    }
  });

  // 鼠标移出暂停视频
  area.addEventListener("mouseout", () => {
    const video = videos[index];
    video.pause();
    video.currentTime = 0; // 重置到视频开头
  });
});

HTML（修改video标签） #

<section class="vid-section">
  <h2 class="video-section-title">Mountain Bike</h2>
  <div class="yt-links">
    <video class="bckg" src="videos/bici.mp4" loop muted preload="auto"></video>
    <iframe src="https://www.youtube.com/embed/HN8Co70QBG0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube.com/embed/zbh4jb1NIVM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube.com/embed/gr0scgxFMjE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube.com/embed/GQSOumJCQmU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>

CSS（保持不变） #

.video-section-title {
  color: orange;
  font-size: 4rem;
  margin: 5% 0% 2% 0%;
}

.vid-section {
  position: relative;
  margin: 2.5vh 5%
}

.bckg {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1;
}

.yt-links {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
}

.yt-links iframe {
  width: 20%;
  aspect-ratio: 16/9;
  margin: 2.5%;
  border-radius: 1rem;
}

额外说明 #

• 如果仍有部分视频无法播放，可检查视频文件编码是否符合Firefox支持的格式（推荐H.264编码的MP4）。
• 避免同时加载过多视频，可考虑在鼠标悬停时才开始加载视频（将preload设为none，在mouseover时调用video.load()），减少资源竞争。

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