Setting Up WIREWAX JW Player Plugin v5 beta

important

This is a preview of a brand new WIREWAX JW player plugin and embedder API. We are currently in beta testing and expecting to launch a client ready version in the near future. This documentation is subjected to change.

For current stable release please check Steps for Setting Up WIREWAX Sync™ with JW Player.

Features#

Here is the chart of features comparison in between WIREWAX JW Player Plugin v4 and v5.

FeaturesJW Plugin v5JW Plugin v4
WIREWAX PlayerPlayer 5Player 4
Video ID overrideYesNo
API supportingWIREWAX embedder APINo wirewax API
JW PlaylistYesYes
Multiple JW Player instancesYesNo

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.

4. Embedder API usage#

WIREWAX embedder API is available to use for variable interactive features. We are still finalizing the syntax and details. Here is a brief example of how to use embedder API to add a product showing in WIREWAX video to your site shopping cart.

embedder.on('addtocart', function(event){
// EVENT object contains production info
// Call your function to add product to your site cart
})

Example of sending an event to Google Analytics

embedder.on('hotspotclick', function(event){
// EVENT Object contains hotspot info
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
})
note

Currently we are in beta testing, there might be extra events firing. Please check with our team before using embedder API (beta) in your production.

5. Multiple instances example#

<head>
<!-- JW Player Script -->
<script type="text/javascript" src="https://content.jwplatform.com/libraries/YOUR_JW_PLAYER_ID.js"></script>
<script type="text/javascript" src="https://edge-player5.wirewax.com/plugins/prod/jwplayer/jw-wirewax.js"></script>
</head>
<body>
<div class="container-wrapper">
<div id="jw-video-container"></div>
<div id="jw-video-container-second"></div>
</div>
<script>
jwplayer('jw-video-container').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/YOUR_JW_MEDIA_ID',
})
jwplayer('jw-video-container_second').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/YOUR_JW_MEDIA_ID_Second',
})
const embedder = new WIREWAX.Embedder('jw-video-container', {
player: jwplayer('jw-video-container'),
});
const embedder2 = new WIREWAX.Embedder('jw-video-container-second', {
player: jwplayer('jw-video-container-second'),
});
</script>
</body>

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;