Unable to find path for video, in next js src Directory

Question

I tried to import the video through various methods, but it keeps giving errors, and I'm unable to embed the video.

here is the file of 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>
      </>
  )
}

here is the directory structure

structure

Answer 1

hi if you want to solve your problem you should add folder video in public folder then add video file in video folder after that you create env file for dev and product in env dev add http://localhost:{your port || 3000} then the complete path http://localhost:3000/videos/lions.mp4

env dev put NEXT_PUBLIC_BASE_URL = http://localhost:3000 and .env.production NEXT_PUBLIC_BASE_URL = your domain server

 <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>