Setting Up WIREWAX JW Player Plugin v5 beta

important

Due to the recent update of JW player on Dec 14, 2021, we are experiencing some breaking changes in JW custom plugin loading process. Please contact support@wirewax.com before starting set up your JW player plugin.

important

WIREWAX JW plugin 4 was officially deprecated and no longer maintained, please contact support@wirewax.com if you are experiencing issues or seeking for upgrade.

Features#

Here is the chart of features for WIREWAX JW Player Plugin v5.

Features	JW Plugin v5
WIREWAX Player	Player 5
Video ID override	Yes
API supporting	No
JW Playlist	Yes
Multiple JW Player instances	No

Setup#

1. Sync WIREWAX Studio with JW Dashboard#

Please follow the tutorial here Steps for Setting Up WIREWAX Sync™ with JW Player. After setting up Sync™, WIREWAX Studio will assign WIREWAX video ID to the videos that you choose to sync to WIREWAX Studio.

note

WIREWAX Sync™ is designed to support WIREWAX third party player plugin:

We won't make any changes on JW dashboard - we only duplicate the video collection you choose to sync to WIREWAX, and assign WIREWAX standard video IDs to these videos.
Plugin v5 support video ID override feature, you can use JW Plugin v5 without setting up WIREWAX Sync™.

If you choose not to use WIREWAX Sync™, please get the WIREWAX video ID of the video you want to setup from WIREWAX Studio.

2. Setup JW Player using JW Player API embed#

JW Player on allow third party plugins in their API embed. For more details, please read full documentation on developer.jwplayer.com.

Use the following coding snippet to setup a JW Player on your page, and add WIREWAX JW player plugin script as plugin option.

note

WIREWAX Plugin script can be included in page head. The difference is the loading order:

When setting up in page head, WIREWAX will check JW Player ready internally
When setring up as JW player plugin options, WIREWAX relies on JW Player ready event payload object to proceed

https://edge-player5.wirewax.com/plugins/prod/jwplayer/jw-wirewax.js

<head>
    <!-- JW Player Script -->
    <script type="text/javascript" src="https://content.jwplatform.com/libraries/YOUR_JW_PLAYER_ID.js"></script>
</head>

<body>
    <div class="container-wrapper">
        <div id="jw-video-container"></div>
    </div>

    <script>
        jwplayer('jw-video-container').setup({
            playlist: 'https://cdn.jwplayer.com/v2/media/YOUR_JW_MEDIA_ID',
            plugins: {
                'https://edge-player5.wirewax.com/plugins/prod/jwplayer/jw-wirewax.js': {},
            },
        })
    </script>
</body>

3. Initialize WIREWAX Plugin on JW player ready#

Setup WIREWAX Plugin

const embedder = new WIREWAX.Embedder('jw-video-container', {
    player: jwplayer('jw-video-container'),
    videoId: YOUR_WIREWAX_VIDEO_ID,
    ready: JW_READY_EVENT_OBJECT
});

WIREWAX.Embedder(id, options)

id - (required) string, this is should be the same as the container id passed into JW player.
options - (required) object: a configuration object:
- player - (required) JW player instance, pass in JW player for API binding
- videoId - (optional) string, it can override WIREWAX video ID for a JW video that has WIREWAX video ID. Or it associate WIREWAX video ID to a JW video that doesn’t have a WIREWAX video ID
- ready - (optional) object, the return event object of JW player on('ready') API. This is required when using WIREWAX Plugin inside jwplayer setup method.

A complete embed code should look like:

<head>
    <!-- JW Player Script -->
    <script type="text/javascript" src="https://content.jwplatform.com/libraries/YOUR_JW_PLAYER_ID.js"></script>
</head>

<body>
    <div class="container-wrapper">
        <div id="jw-video-container"></div>
    </div>

    <script>
        jwplayer('jw-video-container').setup({
            playlist: 'https://cdn.jwplayer.com/v2/media/YOUR_JW_MEDIA_ID',
            plugins: {
                'https://edge-player5.wirewax.com/plugins/prod/jwplayer/jw-wirewax.js': {},
            },
        }).on('ready', (event) => {
            const embedder = new WIREWAX.Embedder('jw-video-container', {
                player: jwplayer('jw-video-container'),
                ready: event,
            });
        })
    </script>
</body>

tip

For multiple JW player instances on the same page, we recommend to embed WIREWAX Plugin script in your page head not JW player plugin options. Then initialization process doesn't have to be inside JW player ready callback and ready: JW_READY_EVENT_OBJECT can be skipped too.

Setup with react-jw-player#

This snippet is using react-jw-player, check the live example here.

// WIREWAXJWPlayer.js
const WIREWAXJWPlayer = () => {
  // Ref: https://github.com/micnews/react-jw-player#optional-player-event-hook-props

  const onReady = (event) => {
    // Append the v5 plugin script
    const script = document.createElement("script");

    script.src =
      'https://edge-player5.wirewax.com/plugins/prod/jwplayer/jw-wirewax.js';
    script.type = "text/javascript";
    script.async = true;

    document.body.appendChild(script);

    // Initialize WIREWAX JW Player plugin with config
    script.onload = () => {
        const embedder = new window.WIREWAX.Embedder('jw-video-container', {
            player: window.jwplayer('jw-video-container'),
            ready: event,
        })
    }
  };

  return (
    <div className="App">
      <div
        className="container-wrapper"
        data-mediaid="TAITbudl"
        style={{ height: "100%", width: "100%" }}
      >
        <ReactJWPlayer
          playerId="jw-video-container"
          playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"
          playlist="https://cdn.jwplayer.com/v2/media/TAITbudl"
          className="jw-player-wrapper"
          onReady={onReady}
        //   isAutoPlay // Optional
        />
      </div>
    </div>
  );
}

export default WIREWAXJWPlayer;