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
.
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
以某种方式使用其他国家的 VPN 解决了这个问题。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.