Fallback video url if default is broken?

[BonBonSlick]

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. MediaError {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."}

This is because of default, the first URL is broken, I would like to check all other resolutions before showing an error message.

Eg default is 1080, is broken? Check 720 -> 480 -> 360 -> 240. All are broken? Show error, or even send a report to the api endpoint.

What listener should be called?

Thanks.

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gkatsev]

Are you provided multiple sources or is this HLS/DASH? If it is HLS/DASH, that should be the behavior already. If it's a list of separate sources, then it'll be ready as part of #1805.

[nikhil-sharma0]

@BonBonSlick
I am encountering a problem while trying to fallback from hls to mp4. I want to have my primary source as m3u8 and secondary as mp4. So if the player doesn't find m3u8 file I want it to fallback to the next src and start playing the mp4 one. But my player doesn't stop trying to fetch the m3u8 file even when it's not there.
I get this in my console VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
I am replacing .mp4 with /master.m3u8 because that's where my m3u8 file will be in CDN.

I am trying this in React with video.js v7.8.4 and this is my code:

import React, { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";

const options = {
fill: true,
fluid: true,
responsive: true,
preload: "auto",
controls: true,
html5: {
  vhs: {
   enableLowInitialPlaylist: false,
    smoothQualityChange: true,
    overrideNative: true
  }
},
playbackRates: [0.25, 0.5],
sourceOrder: true
};

export default function VideoViewer(props) {
  const { src } = props;
  const classes = useStyles();
  const videoRef = useRef(null);
  const [player, setPlayer] = useState(null);

  useEffect(() => {
    const videoPlayer = videojs(videoRef.current, options);
    setPlayer(videoPlayer);

    return () => videoPlayer.dispose();
  }, []);

  useEffect(() => {
    if (player !== null) {
      player.src([
        {
          src: src.replace(".mp4", "/master.m3u8"),
          type: "application/x-mpegURL"
        },
        {
          src,
          type: "video/mp4"
        }
      ]);
    }
  }, [src, player]);

  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js vjs-big-play-centered" />
    </div>
  );
}

VideoViewer.propTypes = {
  src: PropTypes.string.isRequired
};

I am pretty new to this so I might be making some mistake here, feel free to correct me if I missed anything or did something wrong.
Any kind of help is appreciated, thanks!