CODEWITHSUNDEEP
javascriptnode.jsreactjs
CalebN99
CalebN99

Reputation: 99

Converting local mp4 file to fileURL for video-react

Using the video react library to play a local mp4 video, I saw someone use this function to set a selected video file to a url and they said it works. I can select the video file but it doesn't seem to work, my Player is still black screened and unplayable.

Input is where you select the file, then it runs the function, then you use the videoFileURL from the function for the Player

import React, { Component } from "react";
import "./App.css";
import "../node_modules/video-react/dist/video-react.css";
import { Player } from "video-react";

class App extends Component {
  render() {
    return (
      <div className="App">
        <link rel="stylesheet" href="/css/video-react.css" />


        <form id="videoFile">
          <input
            type="file"
            name="video"
            multiple="false"
            onChange={e => {
              this.handleVideoLoad(e);
            }}
          />
        </form>


        <Player
          playsInline
          src={this.videoFileURL}
          fluid={false}
          width={480}
          height={272}
        />

      </div>
    );
  }

  handleVideoLoad(e) {
    console.log(e.target.files);
    let files = e.target.files;
    if (files.length === 1) {
      let file = files[0];
      this.setState({
        videoFileURL: URL.createObjectURL(file),
        videoFileObject: file
      });
    }
  }
}

export default App;

Upvotes: 3

Views: 3216

Answers (1)

aravind_reddy
aravind_reddy

Reputation: 5466

You are missing a few things here:

  1. you have used the setState but you didn't declare any state variables

  2. when you are providing the player URL you should try to access it from the state variable 

    import React, { Component } from "react";
import "./App.css";
import "../node_modules/video-react/dist/video-react.css";
import { Player } from "video-react";
class App extends Component {
state={
 videoFileURL: '',
 videoFileObject: null
 }

render() {
return (
  <div className="App">
    <link rel="stylesheet" href="/css/video-react.css" />
    <form id="videoFile">
      <input
        type="file"
        name="video"
        multiple="false"
        onChange={e => {
          this.handleVideoLoad(e);
        }}
      />
    </form>


    <Player
      playsInline
      src={this.state.videoFileURL}
      fluid={false}
      width={480}
      height={272}
    />

  </div>
);
 }

 handleVideoLoad(e) {
console.log(e.target.files);
let files = e.target.files;
if (files.length === 1) {
  let file = files[0];
  this.setState({
    videoFileURL: URL.createObjectURL(file),
    videoFileObject: file
  });
}
}
 }

export default App;

for more info see: docs

Upvotes: 3

Related Questions