HTML 视频元素在本地开发环境中正常播放，但不会在 Netlify 生产部署中显示

Question

我的网站上有一个视频，我只是将其存储为静态资产并使用 HTML 在页面上呈现，如下所示：

<video
  width="100%"
  height="100%"
  autoPlay
  loop
  muted
>
  <source src='src/assets/demo.mp4' type='video/mp4' />
</video>

当我在本地主机上运行我的开发服务器时，这个视频完全按照预期播放，但是当我在 Netlify 上部署到生产环境时，视频根本不呈现。当我检查该页面时，它会看到一个空的视频元素，其描述为“无法播放视频”。当我检查网络选项卡时，视频通过代码 206 播放。我的 Netlify 应用程序正在从 Github 存储库自动构建和部署。

我试过将编解码器从 .mov 更改为 .mp4 并对其进行压缩，但这没有用。我以前在其他项目上以这种方式显示过视频，没有问题，尽管这些视频是使用 GitHub Pages 而不是 Netlify 部署的。有人知道会发生什么吗？

Answer 1

我最终通过导入视频解决了这个问题，而不是像我在上面的代码中那样提供源的直接路径。

import demo from '../../../../assets/demo.mp4';

<video
  width="100%"
  height="100%"
  autoPlay
  loop
  muted
>
  <source src={demo} type='video/mp4' />
</video>