Video plays in certain browsers but not all of them

I am trying to serve up video content from my CDN, for most videos they all work on all browsers, but some videos such as this one: here will not play in my Edge, Chrome browsers on desktop, it will play on certain phone browsers of chrome, but not all of them. And i can get it to work on Firefox on my computer, Im trying to narrow down how to get it to play all across the board.

here is the code that serves up the video itself, this code is uses VideoJS as the player. the second source is for VOD (Video On Demand) which is where this video error is occuring, i thought intially this problem was a formatting error coming off of my streaming servers but then its working in these certain browsers but not all browsers.

/**
 * @description - VideoPlayer component
 * @param {Object} video - the video object to display
 * @param {Object} onFunctions - an object with functions to call when the video is played, paused, or stopped
 * @returns
 */
const VideoPlayer = ({ video, onFunctions }) => {
  useEffect(() => {}, [video]);
  return (
    <div className={styles.videoPlayerContainer}>
      <div className={styles.watermarkContainer}>
        <a href={video.watermarkUrl}>
          <img src={video.watermark} alt="watermark" className={styles.watermark} />
        </a>
      </div>
      <video
        id="Video"
        className={`${styles.video} video-js vjs-default-skin vjs-big-play-centered`}
        onPlay={onFunctions.handleView ? onFunctions.handleView : null}
        poster={video.videoImageUrl ? video.videoImageUrl : ""}
        controls
        preload="auto"
        width="auto"
        height="auto"
        data-setup={`{"nativeControlsForTouch": true, "controlBar": { "pictureInPicture": true, "muteToggle": false, "volumeControl": true, "timeDivider": false, "durationDisplay": true, "progressControl": ${
          video.status === "streaming" ? false : true
        } } }`}
      >
        {video.status === "streaming" ? (
          <source
            src={`https://${video.videoUrl}/tcproedge/_definst_/MP4:${video.user.livestream.key}/playlist.m3u8`}
            type="application/x-mpegURL"
          />
        ) : (
          <source src={video.videoUrl} type="video/mp4" />
        )}
      </video>
      <Script src="https://unpkg.com/video.js/dist/video.min.js" strategy="beforeInteractive"></Script>
    </div>
  );
};

export default VideoPlayer;