Блог

Главная - Вопросы по программированию - Как импортировать много видеофайлов в приложение React

Как импортировать много видеофайлов в приложение React

#javascript #node.js #reactjs

#javascript #node.js #reactjs

Вопрос:

Я просто хочу загружать видео по запросу из компонента React.В настоящее время пользователю отображается большой список видеороликов .mp4. Когда выбран один из них, местоположение этого видео передается модальному видеопроигрывателю через props. Но при нажатии кнопки воспроизведения я получаю сообщение об ошибке 404, в котором говорится, что видео не найдено.

Сначала я попытался поместить все видеофайлы прямо в папку React src. Затем я попытался переместить их в общую папку React рядом с index.html . Я также заглянул в import(), чтобы загружать по одному видео за раз, но сильно запутался и застрял. Таким образом, в настоящее время нет инструкций import или require ни для одного из видео.

Вот соответствующая часть кода компонента MediaModal:

 import React, { Component } from "react";
import { connect } from "react-redux";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import "../../node_modules/video-react/dist/video-react.css"; // import css
import { Player } from "video-react";

class MediaModal extends Component {
  render() {
    const { isShowing, selectedMedia } = this.props.itemStateObject;
    return (
      <div>
        <Modal isOpen={isShowing} className={this.props.className}>
          <ModalHeader>Modal title</ModalHeader>
          <ModalBody>
            {isShowing amp;amp; (
              <Player
                playsInline
                src={selectedMedia.location}
              />
            )}
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  { closeModal }
)(MediaModal);

Источник видео, используемый указанным выше видеопроигрывателем, генерируется сервером и имеет вид «media / series-title / season-number / video.mp4» Ошибка 404, которую я получаю, такова:
ПОЛУЧИТЬ http://localhost:3000/media/series-title/season-number/video.mp4 404 (Не найден)

Ответ №1:

Ваши файлы помещены в «общедоступную» папку, где веб-сервер может их выбрать? Вы проверили разрешение для этой папки? (Если вы используете Linux, вам нужно это увидеть) У меня была аналогичная проблема с файлами изображений, и я решил ее таким образом. Посмотрите на правильность гиперссылки.

Комментарии:

1. Хосе, да, я поместил файлы в общую папку. Права доступа к каталогу — rwxr-xr-x, а права доступа к файлам — r-r-r- . Вам это кажется правильным? Я использовал Linux, но последние несколько дней использую Git Bash в Windows, и проблема та же.

2. Существует папка, в которой весь ваш код React скомпилирован в JavaScript. Попробуйте там!

3. Я думаю, это то, что я сделал. Я поместил свою папку с мультимедиа в «общедоступную» папку клиента. Я думал, что смогу затем обратиться к нему, используя ./media … но не повезло. Кроме того, гиперссылка выглядит для меня правильной, предполагая, что localhost:3000 /media — это правильный способ доступа к папке мультимедиа.

4. не используйте localhost. Используйте ссылку, которую посетит пользователь: window. location.protocol ‘//’ window. Расположение. имя хоста ‘:’ окно. location.port «сведения о вашем файле»

5. Я протестировал этот код непосредственно в коде модального компонента следующим образом: location.protocol «//» window. Расположение. имя хоста «:» окно. location.port «/» selectedMedia.location}/> но эти переменные ничего не возвращают. Ошибка 404 гласит: «:/media/ series-title / season-number /video.mp4» не может быть найден. Извините, я продолжаю пытаться «@» вас, но безуспешно.