custom error message in player for livestream

user_9049216 0
Viewed 462

I have a react code as shown below which renders player. In the code below, if the condition is true then the code for the ReactJWPlayer is called.

const player = ()=> {
    if(condition) {
        return (
            <ReactJWPlayer
                onPlaylist={[props.playlist]}
                onPlay={() => onPlay()}
                autoPlay={props.autoplay}
                isMuted={false}
            />
        )
    }
}

Problem Statement:

What I want to achieve is, I want to display a custom error message if livestream ends abruptly. Right now, I am seeing:

This video file cannot be played 

(Error Code: 232011)

enter image description here

I am wondering what changes I need to make in the code above so that I can replace an error message above with the following error message:

Video will be available soon.

jwplayer reactjs javascript
2 Answers

You can use onError prop to capture all "media" errors. Setup errors can be caught using onSetupError prop. (P.S. In newer versions of library you should be able to use onError to catch both error types) Here is a working example how to handle error with code 102404:

import ReactJWPlayer from "react-jw-player";

export default function App() {
  
  const setupErrorHandler= (error) => {
    console.log("Setup error");
    console.log(error);
    if (error && error.code === 102404) {
      window.alert(error.message);
    }
    //here you write similar if condition to check if error has error 
      code 232404
    if(error && error.code === 232404){
        //do something..
    }
  };

 const mediaErrorHandler= (error) => {
    console.log("Media error");
    console.log(error);
    //handle error
  };

  return (
    <div className="App">
      <div
        className="jw-video-container"
        data-mediaid="TAITbudl"
        style={{ height: "100%", width: "100%" }}
      >
        <ReactJWPlayer
          playerId="TAITbudl"
          playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"
          playlist="https://cdn.jwplayer.com/v2/playlists/vXggtmeu"
         
          onError={(event) => mediaErrorHandler(event)}
          onSetupError={(event) => setupErrorHandler(event)}
        />
      </div>
    </div>
  );
}

Note : All jwplayer errors have this form :

 {
      "code": 104153,
      "message": "Sorry, the video player failed to load.",
      "sourceError": { Error object | null },
      "type": "setupError"
    }

See documentation

user_58596540

Somehow using VPN of other countries solved the issue.

user_121624300
Related