2

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

Pawel Veselov
  • 3,996
  • 7
  • 44
  • 62
Daniela Ocampo
  • 31
  • 1
  • 5

4 Answers4

1

I did an investigation and nothing works for me. So I build a react component and I upload the video to YouTube to reference it with a frame that gives you YouTube in the video option: share > embed > embed video

Reference: https://www.upbeatcode.com/react/how-to-play-video-in-react/

Daniela Ocampo
  • 31
  • 1
  • 5
0

try

"@assets/*": ["./src/assets/*"],
Miguel Caro
  • 280
  • 1
  • 4
  • 2
    Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – Leonard Nov 18 '22 at 04:35
0

Your path is wrong

This is what you have included in tsconfig.json ./public/assets/videos/*

But, it should be ./public/assets/video/* as you mentioned in the question.

Check once.

Mohammed Shahed
  • 840
  • 2
  • 15
0

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.

Chinedu Odo
  • 1
  • 1