直播播放器中的自定义错误消息

Question

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)

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 .

Answer 1

You can use onError prop to capture all "media" errors. Setup errors can be caught using onSetupError prop. (PS 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

Answer 2

以某种方式使用其他国家的 VPN 解决了​​这个问题。