尝试将视频标签放入 Next.js 错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配

Question

未处理的运行时错误 错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。

警告：预计服务器 HTML 包含 .

中的匹配项

在此处查看更多信息：https://nextjs.org/docs/messages/react-Hydration-error

组件堆栈 视频 分区 家 应用程序 调用栈 抛出水合不匹配

    import Video from "../src/video.mp4"

    export default function Home() {
      return (
        <div>
        <video src={Video}/>
        </div>

Answer 1

不确定这是否是您的情况，但对我来说，这是一个控制视频播放器速度的浏览器扩展。在关于 React 水合错误的Next.js 文档中，它提到了浏览器扩展修改 HTML 以及其他潜在原因以及一些潜在的修复。

Answer 2

您必须使用带有源的视频标签

<div>
  <video autoPlay loop style={{ width: "500px", height: "500px" }}>
    <source src="/video.mp4" />
  </video>
</div>