除非刷新页面，否则视频不会在 Firefox 中加载

Question

我正在尝试建立我的第一个网站。一切正常，但我注意到我的视频无法在 Firefox 中加载，除非我刷新包含该视频的页面。这些视频采用 Firefox 支持的 webm 格式，并且在 Chrome 和 Safari 中都可以正常运行（尽管在 Safari 中自动播放不起作用。不太理想，但目前可以接受）。以下是我的视频 html 标签

{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 || ''} />)
)}

正如你所看到的，有些页面有视频，其余的只有图像（该网站是使用 Astro 框架构建的，页面之间有动画）。同样的问题在我的本地计算机或托管在服务器上仍然存在。这是新安装的 Firefox，没有任何附加组件。

我尝试使用其他视频格式（mp4），但这也不起作用。我尝试删除 preload="auto" 和 autoplay 属性，但这不起作用。 我检查 Firefox 中的控制台（使用 command-shift-j），并在刷新页面时在父进程中看到以下错误（无论它包含视频还是仅包含图像）。不确定是否相关。

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) \[nsIFaviconService.replaceFaviconDataFromDataURL\] loadFavicon resource:///modules/PlacesUIUtils.sys.mjs:213 loadFavicon resource:///modules/PlacesUIUtils.sys.mjs:644 setIconFromLink resource:///actors/LinkHandlerParent.sys.mjs:139 receiveMessage resource:///actors/LinkHandlerParent.sys.mjs:60 LinkHandlerParent.sys.mjs:148:17 setIconFromLink resource:///actors/LinkHandlerParent.sys.mjs:148 receiveMessage resource:///actors/LinkHandlerParent.sys.mjs:60 

当我查看控制台的多进程部分时，我看到“所有候选资源加载失败。媒体加载暂停。”仅在包含视频的页面上且仅在页面刷新之前发出警告 。

抱歉问了这么简单的问题，我确信这是一些非常基本的问题，只有新手才会问，但我真的很感激你们能给出的任何建议。

Answer 1

视频标签上的情况仍然是个谜，但我找到了一个简单的解决方法。如果我不使用视频标签，而是将视频上传到 YouTube 并使用 iframe 元素嵌入这些视频，它们可以在 Firefox、Chrome 和 Safari 上完美运行。作为一个额外的好处，Safari 现在还可以毫无问题地自动播放我的视频。

{entry.data.vid ? (     
  <div style="text-align: center;">
    <iframe width="600" height="400"
    src={entry.data.vid + "autoplay=1&mute=1&loop=1"}
    allowfullscreen>
    </iframe>
  </div>
) : (entry.data.img && (
  <img src={entry.data.img} alt={entry.data.img_alt || ''} />
  )
)}