Next.js src目录下视频路径无法识别，嵌入视频失败求助

问题分析 #

你的代码存在两个核心问题：

• 视频文件的导入语法错误：静态资源需用默认导入，而非命名导入
• 重复用同一视频路径对应不同格式，不符合实际文件结构

解决方案 #

方案1：修正导入语法（适用于assets目录存放视频） #

把命名导入改为默认导入，同时确保视频路径正确：

// 去掉大括号，使用默认导入
import videoBg from '../assets/video/videoBg.mp4'

export default function Home() {
  return (
    <>
      <main className='min-h-screen'>
        <video
          muted
          loop
          autoPlay
          className="fixed -top-2 left-0 min-w-full min-h-full -z-50 object-cover"
        >
          {/* 仅保留对应格式的source，若只有mp4文件可删除ogg相关代码 */}
          <source src={videoBg} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </main>
    </>
  )
}

方案2：使用public目录存放视频（更推荐） #

Next.js的public目录专门用于存放静态资源，无需导入可直接通过路径访问：

1. 在项目根目录创建public/videos文件夹，将videoBg.mp4放入其中
2. 修改page.tsx代码：

export default function Home() {
  return (
    <>
      <main className='min-h-screen'>
        <video
          muted
          loop
          autoPlay
          className="fixed -top-2 left-0 min-w-full min-h-full -z-50 object-cover"
        >
          <source src="/videos/videoBg.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </main>
    </>
  )
}

额外注意事项 #

• 确保视频文件路径、文件名完全匹配（区分大小写）
• autoPlay需配合muted才能在多数浏览器正常触发（你的代码已满足）
• 若需多格式支持，需准备对应格式的文件（如videoBg.ogg）并添加对应的source标签

内容的提问来源于stack exchange，提问作者Dipesh Ranjan