react-player cant play local video

Question

I'm trying to create a popup that will play a video and when it clicked while playing it will pause and hide the popup.

This is when the user clicks to show and play the video

<div className="mn sr" onClick={() =>  vidControl("PLAY")}>
       Showreel
</div>

It will make this div visible and play the video

import Video from "../assets/videos/showreel/showreel.mov";

<div className="showreel" style={videoOpen ? { display: "block" } : { display: "none" }}>
      <ReactPlayer
        url={Video}
        className="sr-video"
        onClick={() => vidControl("PAUSE")}
      />
</div>

This function act as the video control or so-called

const vidControl = (params) => {
    const video = document
      .querySelector(".showreel")
      .getElementsByTagName("video")[0];
    if (params === "PLAY") {
      video.play();
      setVideoOpen(true);
    } else {
      video.pause();
      setVideoOpen(false);
    }
  };

I have no problem when running it locally, but when I deployed and click to play it, there is an error says.

Uncaught (in promise) DOMException: The element has no supported sources.

I've searched for the same error and tried to fix it with this code since they say I gotta handle the promise but in the end, it doesn't fix my problem.

async function videoPromise() {
    const video = document
      .querySelector(".showreel")
      .getElementsByTagName("video")[0];
    try {
      await video.play();
      setVideoOpen(true);
      console.log("play");
    } catch (err) {
      video.pause();
      setVideoOpen(false);
      console.log(err, "error");
    }
  }

Is there any problem with the code or the logic here? Appreciate any kinda responses, thanks before.

What's the URI? You say "local" file, what does that mean here? — Qix - MONICA WAS MISTREATED, Jan 21 '22 at 09:04
I import from here ```import Video from "../assets/videos/showreel/showreel.mov";``` — itsMe, Jan 21 '22 at 09:13
What does that do? Why are you bundling movies into JavaScript payloads? — Qix - MONICA WAS MISTREATED, Jan 21 '22 at 09:15
I don't really get what you said, but I import the video which is in ```mov``` format and use it in the ```src```, and trying to show it and play it when user click — itsMe, Jan 21 '22 at 09:59
add the onError event handler to see what you get: `onError={(error) => {console.log(error);}` — Rodrigo, Jun 21 '22 at 15:31

react-player cant play local video

0 Answers0