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

Question

我有一个如下所示的反应代码，它呈现播放器。 在下面的代码中，如果条件为真，则调用 ReactJWPlayer 的代码。

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

问题陈述：

我想要实现的是，如果直播突然结束，我想显示一条custom error message 。 现在，我看到：

This video file cannot be played 

(Error Code: 232011)

我想知道我需要在上面的代码中进行哪些更改，以便我可以用以下错误消息替换上面的错误消息：

Video will be available soon 。

Answer 1

您可以使用onError道具来捕获所有“媒体”错误。 可以使用onSetupError捕获设置错误。 （PS 在较新版本的库中，您应该能够使用onError来捕获两种错误类型）这是一个如何处理代码为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>
  );
}

注意：所有jwplayer错误都具有以下形式：

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

查看文档

Answer 2

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