[SOLVED] Play video with nextjs and reactjs

Play video with nextjs and reactjs

I have been trying to load a video in my production environment with Next.js, but I can't. I have created public/assets/video route and I have an .mp4 file saved there. There is a public/assets/images route and I have like 50 pictures there and they work perfectly. I noticed that when I run npm run build in my .next/static/media folder, the video doesn't appear there. In my tsconfig.json I added the necessary path (like I did with images) , but it still doesn't work:

tsconfig.json

"paths": {
      "@images/*": [
        "./public/assets/images/*"
      ],
      **"@videos/*": [
        "./public/assets/videos/*"
      ],**

There's the code to show the video that works locally.

index.tsx

 <div>
        <iframe
          width={windowSize.width}
          height={windowSize.height}
          allow="autoplay"
          src="/assets/videos/videolabone_.mp4"
          title="videolabone">
        </iframe>
      </div>

package-lock.json

"dependencies": {
        "@emailjs/browser": "^3.6.2",
        "@emotion/cache": "~11.7.1",
        "@emotion/react": "~11.7.1",
        "@emotion/server": "~11.4.0",
        "@emotion/styled": "~11.6.0",
        "@mui/icons-material": "~5.2.5",
        "@mui/material": "~5.2.5",
        "@mui/styles": "5.2.3",
        "aos": "^2.3.4",
        "formik": "2.2.9",
        "next": "^12.1.6",
        "npm-check-updates": "^16.2.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "~7.2.6",
        "react-toastify": "^9.0.5",
        "redux-thunk": "~2.4.1",
        "sass": "~1.45.1",
        "sharp": "0.29.3",
        "yup": "0.32.11"
      },

Note:

It works with the video in my project and in a docker image, both run locally.
I have saved the video in git large file stage.
I have been trying to show the video in my project, which is on DigitalOcean server, with a docker container and that's where it doesn't load.

This appears in production

I have tried to change the video format, save it in git lfs, put the video source directly on Google Drive

Solution

i finally found something that works and i had to use a package for that. Download and install this NPM package

const withVideos = require('next-videos')

module.exports = withVideos()

add the above code in your next.config.js

<video
              autoPlay={true}
              id="v0"
              autobuffer="autobuffer"
              preload="preload"
              className=" bg-black shadow-2xl rounded-full flex flex-row justify-between items-center p-3 sticky top-0 w-11/12 md:ml-12"
              muted
              
              style={{ filter: "grayscale(0.3)" }}
            >
              <source type="video/mp4" src="/video/anyvideo.mp4"></source>
            </video>

then you can modify the above code to suit your taste.