在实时播放器中显示自定义错误消息
display custom error message in a live Player
我有一个 反应代码 如下所示,它在页面加载时呈现播放器。仅当条件为真时,代码才会进入 if 块。
const player = ()=> {
if(condition) {
return (
<ReactJWPlayer
playlist={[props.playlist]}
/>
)
}
}
问题陈述: 对于错误代码 232011
,我看到以下错误消息:
[![在此处输入图片描述][1]][1]
This video file cannot be played
(Error Code: 232011)
我想知道我需要在上面的 react 代码中做哪些更改,以便我可以在播放器中用以下错误消息替换上面的错误消息。
Video will be available soon
您必须使用 intl.{lang}.errors
对象。此对象本地化播放器中显示的错误消息。
为了配置intl.{lang}.errors
,你将不得不使用customProps
选项,由react-jw-player直接应用到JW玩家实例。
您可以只坚持使用 en
,或者根据您的用例添加额外的语言支持。
import { useRef } from "react";
import ReactJWPlayer from "react-jw-player";
import ReactDOM from "react-dom";
export default function App() {
const jwPlayerRef = useRef();
const myErrorHandler = (err) => {
console.log(err);
// Find the Node where error message is shown
const errorNode = ReactDOM.findDOMNode(
jwPlayerRef.current
).getElementsByClassName("jw-error-text");
// If the error node exists, replace both message and code
if (errorNode && errorNode.length)
errorNode[0].innerText = "Custom Error Message";
};
return (
<div className="App">
<div
className="jw-video-container"
data-mediaid="TAITbudl"
style={{ height: "100%", width: "100%" }}
>
<ReactJWPlayer
ref={jwPlayerRef}
playerId="TAITbudl"
playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"
playlist="https://cdn.jwplayer.com/v2/media/123"
onError={myErrorHandler}
onSetupError={myErrorHandler}
customProps={{ // <= Official way to override the error message
intl: {
en: {
errors: {
badConnection:
"This video cannot be played because of a problem with your internet connection.",
cantLoadPlayer: "Sorry, the video player failed to load.",
cantPlayInBrowser:
"The video cannot be played in this browser.",
cantPlayVideo: "This is my custom error Message",
errorCode: "Code - ",
liveStreamDown:
"The live stream is either down or has ended.",
protectedContent:
"There was a problem providing access to protected content.",
technicalError:
"This video cannot be played because of a technical error."
}
}
}
}}
/>
</div>
</div>
);
}
The intl
object allows you to add new language translations, [...] - Docs
请注意 getElementsByClassName("jw-error-text")
是一个 hack,如果 JW Player 决定更改 class 名称或对其进行混淆,则此 hack 将失效。
我有一个 反应代码 如下所示,它在页面加载时呈现播放器。仅当条件为真时,代码才会进入 if 块。
const player = ()=> {
if(condition) {
return (
<ReactJWPlayer
playlist={[props.playlist]}
/>
)
}
}
问题陈述: 对于错误代码 232011
,我看到以下错误消息:
[![在此处输入图片描述][1]][1]
This video file cannot be played
(Error Code: 232011)
我想知道我需要在上面的 react 代码中做哪些更改,以便我可以在播放器中用以下错误消息替换上面的错误消息。
Video will be available soon
您必须使用 intl.{lang}.errors
对象。此对象本地化播放器中显示的错误消息。
为了配置intl.{lang}.errors
,你将不得不使用customProps
选项,由react-jw-player直接应用到JW玩家实例。
您可以只坚持使用 en
,或者根据您的用例添加额外的语言支持。
import { useRef } from "react";
import ReactJWPlayer from "react-jw-player";
import ReactDOM from "react-dom";
export default function App() {
const jwPlayerRef = useRef();
const myErrorHandler = (err) => {
console.log(err);
// Find the Node where error message is shown
const errorNode = ReactDOM.findDOMNode(
jwPlayerRef.current
).getElementsByClassName("jw-error-text");
// If the error node exists, replace both message and code
if (errorNode && errorNode.length)
errorNode[0].innerText = "Custom Error Message";
};
return (
<div className="App">
<div
className="jw-video-container"
data-mediaid="TAITbudl"
style={{ height: "100%", width: "100%" }}
>
<ReactJWPlayer
ref={jwPlayerRef}
playerId="TAITbudl"
playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"
playlist="https://cdn.jwplayer.com/v2/media/123"
onError={myErrorHandler}
onSetupError={myErrorHandler}
customProps={{ // <= Official way to override the error message
intl: {
en: {
errors: {
badConnection:
"This video cannot be played because of a problem with your internet connection.",
cantLoadPlayer: "Sorry, the video player failed to load.",
cantPlayInBrowser:
"The video cannot be played in this browser.",
cantPlayVideo: "This is my custom error Message",
errorCode: "Code - ",
liveStreamDown:
"The live stream is either down or has ended.",
protectedContent:
"There was a problem providing access to protected content.",
technicalError:
"This video cannot be played because of a technical error."
}
}
}
}}
/>
</div>
</div>
);
}
The
intl
object allows you to add new language translations, [...] - Docs
请注意 getElementsByClassName("jw-error-text")
是一个 hack,如果 JW Player 决定更改 class 名称或对其进行混淆,则此 hack 将失效。