0

I am attempting to load a local video into react using react-player to play the video. I have the basic code setup but I am unsure why the video isn't playing.

I've seen some chatter about the video needing to be in the public folder but is that really necessary? Here is the codesandbox and below is the actual code:

import React, { useState } from "react";
import ReactPlayer from "react-player";
import classes from "./app.module.css";

function App() {
  const [videoFilePath, setVideoFileURL] = useState(null);

  return (
    <div>
      <div>
        <button onClick={() => setVideoFileURL("./assets/beyondTheSea.mp4")}>
          Play
        </button>
      </div>

      {/**VIDEO 1 */}
      <div>
        {videoFilePath ? (
          <ReactPlayer
            url={videoFilePath}
            width="50%"
            height="50%"
            controls={true}
          />
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
}

export default App;
LoF10
  • 1,907
  • 1
  • 23
  • 64

1 Answers1

0

It seems the video does need to be in the public folder as

setVideoFileURL("beyondTheSea.mp4")

does work, when beyondTheSea.mp4 is a file in your public folder.

Sandbox Example

5eb
  • 14,798
  • 5
  • 21
  • 65