我的Next.js应用程序的索引页面在服务器端呈现。
在开发应用程序时，我遇到了以下错误：
未处理的运行时错误
错误：由于初始UI与服务器上呈现的UI不匹配，因此水合失败。
警告：服务器HTML应在中包含匹配项。< h2 >< section >
查看更多信息此处：https://nextjs.org/docs/messages/react-hydration-error组件堆栈调用堆栈throwOnHydrationMismatch node_modules/react-dom/cjs/react-dom.development.js（12507：0）tryToClaimNextHydratableInstance node_modules/react-dom/cjs/react-dom.development.js（12535：0）updateHostComponent node_modules/react-dom/cjs/react-dom.development.js（19902：0）beginWork node_modules/react-dom/cjs/react-dom.development.js（21618：0）callCallback node_modules/react-dom/cjs/react-dom.development.js（4164：0）invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js（4213：0）invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js（4277：0）beginWork$1 node_modules/react-dom/cjs/react-dom.development.js（27451：0）performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js（26557：0）workLoopSync node_modules/react-dom/cjs/react-dom.development.js（26466：0）renderRootSync node_modules/react-dom/cjs/react-dom.development.js（26434：0）performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js（25738：0）workLoop node_modules/scheduler/cjs/scheduler.development.js（266：0）flushWork node_modules/scheduler/cjs/scheduler.development.js（239：0）performWorkUntilDeadline node_modules/scheduler/cjs/scheduler.development.js（533：0）
当我关闭错误窗口时，页面看起来应该是这样的，但是我仍然在下一次渲染时得到错误。
虽然错误提到了标签h2和section，但我没有注意到它们有任何问题。通过反复试验，我一直在注解掉索引页面的不同部分，以查看是哪个部分导致了错误。最后，删除以下视频标记阻止了错误的发生：

<video
    autoPlay
    preload="auto"
    loop
    muted
    className={styles.video}
  >
    <source src="/landing/video.webm" type="video/webm" />
  </video>

字符串
为什么这个简单的视频会导致错误？我如何将此视频保留在我的登录页上并维护SSR？