无法找到视频的路径，在下一个js src目录中

Question

我尝试通过各种方法导入视频，但一直报错，无法嵌入视频。

这是app/page.tsx的文件

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 src={videoBg} type="video/mp4" />
          <source src={videoBg} type="video/ogg" />
          Your browser does not support the video tag.
        </video>
      </main>
      </>
  )
}

这是目录结构

Answer 1

嗨，如果您想解决您的问题，您应该在公共文件中添加文件夹视频 之后，您为 dev 和产品创建 env 文件，在 env dev 添加 http://localhost:{your port || 3000} 然后是完整路径 http://localhost:3000/videos/lions.mp4

env dev 把 NEXT_PUBLIC_BASE_URL = http://localhost:3000 和 .env. Production NEXT_PUBLIC_BASE_URL = 您的域服务器

 <video className="w-100" autoPlay  controls preload="none">
          <source
            src={`${process.env.NEXT_PUBLIC_BASE_URL}/videos/lions.mp4`}
            type="video/mp4"
          />
          <track
            src={`${process.env.NEXT_PUBLIC_BASE_URL}/videos/lions.mp4`}
            kind="subtitles"
            srclang="en"
            label="English"
          />
          Your browser does not support the video tag.
        </video>