Error by the src attribute or assigned media provider

I am attempting to import a video to a TIKTOK clone application from a link sourced from a Google Firebase API. However, the following error message appears when I press play:

ERROR The media resource indicated by the src attribute or assigned media provider object was not suitable.

Below is the React code I am using with a function to handle the start of the video. The video is sourced from a URL on Firebase Storage.

import React, { useRef, useState } from "react";
import "./video.css";

function Video() {
  const videoRef = useRef(null);
  const [play, setPlay] = useState(false);

  function handleStart() {
    if (play) {
      videoRef.current.pause();
      setPlay(true);
    } else {
      videoRef.current.play();
      setPlay(true);
    }
  }

  return (
    <div className="video">
      <video
        className="video__player"
        ref={videoRef}
        onClick={handleStart}
        loop
        src="https://firebasestorage.googleapis.com/v0/b/jornada-dev.appspot.com/o/brecker2.mp4?alt=media&token=b5399418-9276-4e53-a706-1e00290c2c74"
      >
        
      </video>
    </div>
  );
}

export default Video;

Hi 👋 I may assume whenever the request responds with an object or error, and not an actual media blob, it would throw that error that media type was not suited.

You could try fetch the blob with javascript first, check if there is no error, and the object type is indeed mp4 and only after that set it to the src, thus being 100% sure of what type you pass to src.

  onError={event => console.log(event.target.error.message)}