Display Custom Error Message In A Live Player

I have a react code as shown below which renders player on page load. The code goes inside the if block only if the condition is true. const player = ()=> { if(condition) {

Solution 1:

You have to use intl.{lang}.errors object. This object localizes the error messages displayed in the player.

In order to configure intl.{lang}.errors, you will have to use customProps option exposed by react-jw-player to be applied directly to the JW Player instance.

You can stick with en only, or add additional language support depending on your use-case.

import { useRef } from"react";
importReactJWPlayer from"react-jw-player";
importReactDOM from"react-dom";

exportdefaultfunctionApp() {
  const jwPlayerRef = useRef();

  constmyErrorHandler = (err) => {
    console.log(err);
   // Find the Node where error message is shownconst errorNode = ReactDOM.findDOMNode(
      jwPlayerRef.current
    ).getElementsByClassName("jw-error-text");
    // If the error node exists, replace both message and codeif (errorNode && errorNode.length)
      errorNode[0].innerText = "Custom Error Message";
  };

  return (
    <divclassName="App"><divclassName="jw-video-container"data-mediaid="TAITbudl"style={{height: "100%", width: "100%" }}
      ><ReactJWPlayerref={jwPlayerRef}playerId="TAITbudl"playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"playlist="https://cdn.jwplayer.com/v2/media/123"onError={myErrorHandler}onSetupError={myErrorHandler}customProps={{ // <= Officialwaytooverridetheerrormessageintl: {
              en: {
                errors: {
                  badConnection:
                    "Thisvideocannotbeplayedbecauseofaproblemwithyourinternetconnection.",
                  cantLoadPlayer: "Sorry, thevideoplayerfailedtoload.",
                  cantPlayInBrowser:
                    "Thevideocannotbeplayedinthisbrowser.",
                  cantPlayVideo: "ThisismycustomerrorMessage",
                  errorCode: "Code- ",
                  liveStreamDown:
                    "Thelivestreamiseitherdownorhasended.",
                  protectedContent:
                    "Therewasaproblemprovidingaccesstoprotectedcontent.",
                  technicalError:
                    "Thisvideocannotbeplayedbecauseofatechnicalerror."
                }
              }
            }
          }}
        /></div></div>
  );
}

The intl object allows you to add new language translations, [...] - Docs

Note that getElementsByClassName("jw-error-text") is a hack, and if JW Player decided to change the class name, or obfuscate it, this hack will break.