Я пытаюсь загрузить видео в своей производственной среде с помощью Next.js, но не могу. Я создал маршрут public/assets/video и сохранил там файл .mp4
. Существует маршрут public/assets/images, и у меня там около 50 изображений, и они отлично работают. Я заметил, что когда я запускаю npm run build
в своей папке .next/static/media
, видео там не появляется.
В моем tsconfig.json
я добавил нужный путь (как я сделал с изображениями), но он все равно не работает:
tsconfig.json
"paths": {
"@images/*": [
"./public/assets/images/*"
],
**"@videos/*": [
"./public/assets/videos/*"
],**
Есть код для показа видео, которое работает локально.
index.tsx
<div>
<iframe
width = {windowSize.width}
height = {windowSize.height}
allow = "autoplay"
src = "/assets/videos/videolabone_.mp4"
title = "videolabone">
</iframe>
</div>
пакет-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"
},
Примечание:
Я попытался изменить формат видео, сохранить его в git lfs, поместить источник видео прямо на Google Диск.
пытаться
"@assets/*": ["./src/assets/*"],
Я провел расследование, и ничего не работает для меня. Итак, я создаю компонент реакции и загружаю видео на YouTube, чтобы сослаться на него с помощью фрейма, который дает вам YouTube в опции видео: поделиться > вставить > вставить видео
Ссылка: https://www.upbeatcode.com/react/how-to-play-video-in-react/
Ваш путь неверен
Это то, что вы включили в tsconfig.json
./public/assets/videos/*
Но это должно быть ./public/assets/video/*
, как вы упомянули в вопросе.
Проверьте один раз.
Спасибо за этот фрагмент кода, который может предоставить некоторую ограниченную немедленную помощь. правильное объяснение значительно улучшит его долгосрочную ценность, показав, почему это хорошее решение проблемы, и сделает его более полезным для будущих читателей с другими похожими вопросами. Пожалуйста, отредактируйте свой ответ, добавив некоторые пояснения, включая сделанные вами предположения.