1

In next.js app I fetch video urls successfully and want to render them in my app but getting this error: "Uncaught (in promise) DOMException: The element has no supported sources"

I set a video element

 <video
        loop
        onClick={onVideoPress}
        ref={videoRef}
        src={url}
        style={{ objectFit: "cover" }}
      />

this is ref:

   const videoRef = useRef(null);

this is the click handler:

const onVideoPress = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  };

this is the source error that chrome tools show:

enter image description here

  • I wrapped videoRef.current.play(); with try/catch but i got same error:

  • I tried this:

     if (videoRef.current !== null) {
      videoRef.current
        .play()
        .then(() => {
          setPlaying(true);
        })
        .catch((e) => {
          console.error("eror in play video", e);
        });
    }

and add crossorigin="anonymous" on video element but still have the same issue

When I click on the video component, videoRef.current changes to:

enter image description here

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • That error may be because of a CORS issue from the URL you're trying to play content from. See [DOMException: Failed to load because no supported source was found](https://stackoverflow.com/questions/37674223/domexception-failed-to-load-because-no-supported-source-was-found). – juliomalves May 31 '22 at 17:20
  • 1
    @juliomalves I wrote `if (videoRef.current !== null) { videoRef.current .play() .then(() => { setPlaying(true); }) .catch((e) => { console.error("eror in play video", e); }); } ` and set ` crossorigin="anonymous"` but did not fix it – Yilmaz Jun 01 '22 at 01:49

0 Answers0