CODEWITHSUNDEEP
javascripthtmlsymfonyreactjshtml5-video
user2632646
user2632646

Reputation: 51

React - Using and loading Video files

I've run into a unique problem with a program I'm trying to write. I'm writing a backend REST api in Symfony2 which enables a user to upload a video file (mp4). I have a front end client that I've written in React. I want to be able to select a specific video file from a list of choices and pass enough information down to a Component via props to load a video.

There's been a bit of a problem trying to load the video as when I plug the path to the video in via props, the video does not display. Only the controls are visible, though they are greyed out. It's almost as though it can't find the video. This is an example of what my React code looks like as of the moment.

render(){
    const {details, index} = this.props;
    return(
        <li>
            <div id="theVideo">
                <video id="samp" width="640" height="480" controls>
                    <source src = {this.props.details.videoPath} type="video/mp4">
                        Your browser does not support this video format.
                    </source>
                </video>
            </div>
            {details.textOfSpeech}
        </li>
    );

The odd thing is that if I create a static html file and load in the path exactly as it comes through the videoPath props, the video is displayed and the controls are active. Like so.....

      <video id="samp" width="640" height="480" controls>
        <source src="/Users/thevideos/SideProjects/speechQuill/app/../web/uploads/227bd2a3eee545b251f9362e08b1debe.mp4" type="video/mp4">
        </source>
      </video>

I've been unable to determine why exactly this occurs. I can get around the problem by plugging in the path to an import statement atop my Component file and plugging the import value into the source tag....

     import video from './prototype.mp4';
.
.
        <div>
        <video controls src={video} type="video/mp4"></video>

This will get the video loading in React but, as a beginner in React, it defeats the purposes of loading in the video from a specific prop selection for the functionality of the program I'm trying to build. I don't understand why exactly this is occurring. It doesn't happen if I plug in a URL into the src property however.

My symfony backend loads the file into a separate directory for the client to pull from. That's how I intended the application to run but I'm considering altering the upload process to send it to Cloudinary or something so I can get around this issue. Inevitably, I'd like to use something like popcorn.js so I can annotate uploaded videos. Still, I'd like to understand why this is happening in React and not a static html file and how to circumvent this problem.

Any insight would be much appreciated. :-)

Upvotes: 4

Views: 17757

Answers (1)

Yuri Pereira
Yuri Pereira

Reputation: 1995

You are declaring const {details, index} = this.props; to shorthand the name of your props, so it's not necessary anymore to use this.props, just use details or index.

render(){
    const {details, index} = this.props;
    return(
        <li>
            <div id="theVideo">
                <video id="samp" width="640" height="480" controls>
                    <source src = {details.videoPath} type="video/mp4">
                        Your browser does not support this video format.
                    </source>
                </video>
            </div>
            {details.textOfSpeech}
        </li>
    );

I hope it works =)

Upvotes: 4

Related Questions