Воспроизведение видео с помощью nextjs и reactjs

Я пытаюсь загрузить видео в своей производственной среде с помощью 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 big file stage.
  • Я пытался показать видео в своем проекте, который находится на сервере DigitalOcean, с док-контейнером, и там он не загружается.

Это появляется в производстве

Я попытался изменить формат видео, сохранить его в git lfs, поместить источник видео прямо на Google Диск.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
227
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

пытаться

"@assets/*": ["./src/assets/*"],

Спасибо за этот фрагмент кода, который может предоставить некоторую ограниченную немедленную помощь. правильное объяснение значительно улучшит его долгосрочную ценность, показав, почему это хорошее решение проблемы, и сделает его более полезным для будущих читателей с другими похожими вопросами. Пожалуйста, отредактируйте свой ответ, добавив некоторые пояснения, включая сделанные вами предположения.

Leonard 18.11.2022 05:35
Ответ принят как подходящий

Я провел расследование, и ничего не работает для меня. Итак, я создаю компонент реакции и загружаю видео на YouTube, чтобы сослаться на него с помощью фрейма, который дает вам YouTube в опции видео: поделиться > вставить > вставить видео

Ссылка: https://www.upbeatcode.com/react/how-to-play-video-in-react/

Ваш путь неверен

Это то, что вы включили в tsconfig.json./public/assets/videos/*

Но это должно быть ./public/assets/video/*, как вы упомянули в вопросе.

Проверьте один раз.

Другие вопросы по теме