在 JW Player 中显示自定义错误消息

如何解决在 JW Player 中显示自定义错误消息

我有一个 反应代码，如下所示，它在页面加载时呈现播放器。仅当条件为真时，代码才会进入 if 块。

const player = ()=> {
    if(condition) {
        return (
            <ReactJWPlayer
                playlist={[props.playlist]}
            />
        )
    }
}

问题说明：对于错误代码 232011，我看到以下错误消息：

This video file cannot be played
(Error Code: 232011)

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

Video will be available soon

解决方法

您必须使用 intl.{lang}.errors 对象。此对象本地化播放器中显示的错误消息。

为了配置 intl.{lang}.errors，您必须使用 react-jw-player 公开的 customProps 选项直接应用于 JW Player 实例。

您可以只使用 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>
  );
}

intl 对象允许您添加新的语言翻译，[...] - Docs

请注意，getElementsByClassName("jw-error-text") 是一种 hack，如果 JW Player 决定更改类名或对其进行混淆，则此 hack 将失效。