How to import lots of video files into React app

Question

I just want to load videos upon request from within a React Component. The user is currently shown a large list of .mp4 videos. When one is selected, the location of that video is passed to a video player modal via props. But when the play button is pressed, I get a 404 error saying the video couldn't be found.

At first, I tried putting all of the video files right inside the React src folder. Then, I tried moving them to the React public folder next to index.html. I also looked into import() to load one video at a time but got really confused and flat out stuck. So there are currently no import or require statements for any of the videos.

Here is the relevant part of the MediaModal component code:

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 && (
              <Player
                playsInline
                src={selectedMedia.location}
              />
            )}
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

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

The video source used by the video player above is generated by the server and has the form "media/series-title/season-number/video.mp4" The 404 error I receive is: GET http://localhost:3000/media/series-title/season-number/video.mp4 404 (Not Found)

Jose Cabrera Zuniga Jose Cabrera Zuniga · Accepted Answer · 2019-04-09T17:46:20

Are your files placed in a "public" folder where the webserver can pick them? Did you verified the permission for that folder? (If you are using Linux you need to see this) I had a similar problem for image files and solved this way. Take a look at the hyperlink for correctness.

How to import lots of video files into React app

1 Answers