Firefox中视频需刷新页面才可加载的问题求助

问题概述 #

使用Astro框架搭建的网站，页面间带过渡动画，在Firefox中视频必须刷新页面才能加载，Chrome和Safari表现正常（Safari autoplay问题暂不关注）。已尝试webm/mp4格式，移除preload="auto"和autoplay属性，本地与部署后均存在问题，Firefox为全新无插件版本。

控制台报错：

• 父进程始终出现NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIFaviconService.replaceFaviconDataFromDataURL]错误
• 含视频页面刷新前多进程控制台提示All candidate resources failed to load. Media load paused.

当前视频代码：

{entry.data.vid ? (     
   <video poster="/assets/video/Loading.gif" preload="auto" controls loop muted autoplay>
      <source src={entry.data.vid + ".webm"} type="video/webm">
      Opps. Something went wrong with my video.
   </video>
) : (entry.data.img && (
   <img src={entry.data.img} alt={entry.data.img_alt || ''} />)
)}

排查与解决步骤 #

1. 修正资源路径与CORS配置 #

• 确认视频文件存在于Astro项目的public目录对应路径下（比如public/assets/video/xxx.webm），确保entry.data.vid拼接后的路径正确，可直接在Firefox地址栏输入视频URL测试是否能打开。
• 服务器端添加CORS响应头：针对视频资源，设置Access-Control-Allow-Origin: *（或对应域名），Firefox对媒体资源的跨域检查比Chrome更严格，即使同域也可能因响应头缺失导致加载失败。

2. 调整视频标签属性与加载逻辑 #

• 给<source>标签添加crossorigin="anonymous"属性，强制Firefox按跨域规则处理资源，避免加载阻塞：

  <source src={entry.data.vid + ".webm"} type="video/webm" crossorigin="anonymous">
  

• 增加MP4格式作为 fallback，覆盖更多兼容场景：

  <source src={entry.data.vid + ".mp4"} type="video/mp4" crossorigin="anonymous">
  

• 添加客户端脚本手动触发视频加载，解决Astro静态渲染可能导致的初始化延迟：

  <script is:inline>
    window.addEventListener('DOMContentLoaded', () => {
      const video = document.querySelector('video');
      if (video && !video.src) return;
      // 若视频未加载则手动触发
      if (video.readyState < 2) {
        video.load();
      }
    });
  </script>
  

3. 修复Favicon错误 #

控制台的favicon错误可能干扰Firefox的资源加载流程，在Astro的页面头部添加正确的favicon链接：

<head>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <!-- 或使用svg格式 -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

确保favicon文件存在于public目录下，解决该错误后重试视频加载。

4. 排查页面过渡动画影响 #

暂时禁用页面间的过渡动画，测试视频是否能正常加载。若禁用后恢复正常，说明动画逻辑阻塞了视频元素的初始化：

• 调整动画触发时机，在动画完成后再初始化视频
• 给视频元素添加data-astro-reload属性，强制Astro在页面切换时重新加载该元素

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