Steps for Setting Up WIREWAX Sync™ with JW Player

Setting Up WIREWAX Sync™#

This only needs to be done ONCE per each WIREWAX account using WIREWAX Sync™.

1. Log in to your JW Player account (make sure you have admin access in your account)#

  1. Click the Account tab at the Bottom left to raise the list.
    • Select the API Credentials.
  2. Click the show credentials button.
  3. Copy your API Key and API Secret.

2. Go to wirewax.app and sign in#

  1. Click on the Sync icon in the top right corner.
  2. Navigate to the JW Player tab and paste in your JW Player API Key and API Secret.
  3. Click Connect.

3. Within the Sync modal, you can select the videos that you’d like to sync from JW Player to WIREWAX#

  1. Click the syncing icon on any of the preview cards. It may take a few moments to upload the video and run it through our encoding and vision processes.
  2. You’ll be able to navigate back to the Videos section in WIREWAX to see your newly synced videos.
  3. You can return to the Sync modal at any time to sync new or additional videos from JW Player to WIREWAX

4. Viewing your interactive Video in the JW Player player#

First, you’ll need two pieces of information: the Player ID and Media ID. To find these, go to the Videos section of your JWPlayer Dashboard. Click on the asset that you want to utilise to find the Media ID, and then go to the Embed Code to find the Player ID. The Player ID is after the Media ID and the hyphen in the embed code. The below highlights where to find both IDs:

example-gif

  1. Add the script for the JW Player player to the head of your page, referencing the player ID. Again, the Player ID is after the Media ID and the hyphen in the embed code.
  2. Add the wirewax.js script to the head of your page
  3. Add a div with an id of video-container within the body of your pages html
  4. Include a script which references the video id (from JW Platform) just before your body closing tag

Embedding JW player with WIREWAX JW plugin#

Embed JW player plugin#

Single video setup#

<!-- to try out a new video,
replace all references of [MEDIA ID] with your JW mediaId and
change the URL in jwScript.src to the one from your JWPlayer
the video must be synced with WIREWAX -->
<div class=”container-wrapper” data-mediaId=[MEDIA ID]>
<div id=’video-container’></div>
</div>
<script type=’text/javascript’>
var jwScript = document.createElement(“script”);
var wwxScript = document.createElement(“script”);
jwScript.type = “text/javascript”;
wwxScript.type = “text/javascript”;
jwScript.src = ‘https://content.jwplatform.com/libraries/[PLAYER ID];
wwxScript.src =//edge-player.wirewax.com/ww4release/javascripts/wirewax-jwplayer.js’;
if (jwScript.readyState) { //IE
jwScript.onreadystatechange = function() {
if (script.readyState == “loaded” ||
script.readyState == “complete”) {
script.onreadystatechange = null;
jwplayer(“video-container”).setup({
playlist: “https://cdn.jwplayer.com/v2/media/[MEDIA ID]
})
document.getElementsByTagName(“head”)[0].appendChild(wwxScript);
}
};
} else {
jwScript.onload = function() {
jwplayer(“video-container”).setup({
playlist: “https://cdn.jwplayer.com/v2/media/[MEDIA ID]
})
document.getElementsByTagName(“head”)[0].appendChild(wwxScript);
};
}
document.getElementsByTagName(“head”)[0].appendChild(jwScript);
</script>

Playlist setup#

If you have a playlist with mixed interactive and normal videos, please use the below script:

<style>
.jw-wrapper > .jw-controls{
z-index: 5 !important;
}
.jw-wrapper > .jw-overlays {
z-index: 5 !important;
}
</style>
<div class="container-wrapper">
<div id="[CONTAINER_ID]"></div>
</div>
<script>
var jwScript = document.createElement("script");
jwScript.type = "text/javascript";
jwScript.src = "https://content.jwplatform.com/libraries/[PLAYER ID].js";
window.jwpContainerId = [CONTAINER_ID]
if (jwScript.readyState) { //IE
jwScript.onreadystatechange = function() {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
jwplayer(window.jwpContainerId).setup({
playlist: "https://cdn.jwplayer.com/v2/playlists/[PLAYLIST ID]",
plugins: {
'https://edge-player.wirewax.com/ww4release/javascripts/wirewax-jwplayer-playlist.js': {}
}
})
}
};
} else {
jwScript.onload = function() {
jwplayer(window.jwpContainerId).setup({
playlist: "https://cdn.jwplayer.com/v2/playlists/[PLAYLIST ID]",
plugins: {
'https://edge-player.wirewax.com/ww4release/javascripts/wirewax-jwplayer-playlist.js': {}
}
})
};
}
document.getElementsByTagName("head")[0].appendChild(jwScript);
</script>

Embed JW player plugin with react.js#

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

import React from 'react';
import ReactJWPlayer from 'react-jw-player';
const JwPlayerBlock = () => {
const onReady = () => {
const script = document.createElement("script");
script.src =
"//edge-player.wirewax.com/ww4release/javascripts/wirewax-jwplayer.js";
script.async = true;
document.body.appendChild(script);
};
// wirewax v4 plugin doesn't support autoPlay for the most recent jwplayer major version (8.X)
// a way to walk around is to do a checking after ReactJWPlayer autoStarted:
// Ref: https://github.com/micnews/react-jw-player#optional-player-event-hook-props
const handleAutoStart = (event) => {
const checkingAutoStart = setInterval(() => {
if (!window.wirewax.playerReady) return;
window.wirewax.playerApi.playVideo();
clearInterval(checkingAutoStart);
}, 100);
}
// only run once on mobile
const onPlayHandler = (event) => {
handleAutoStart();
}
// only run once on desktop
const onAutoStartHandler = (event) => {
handleAutoStart();
}
return (
<div
className="container-wrapper"
data-mediaid="TAITbudl"
style={{ height: '100%', width: '100%' }}
>
<ReactJWPlayer
playerId="video-container" // WX player plugin is using this id to inject components to the correct position
playerScript="https://content.jwplatform.com/libraries/j9BLvpMc.js"
playlist="https://cdn.jwplayer.com/v2/media/TAITbudl"
className="jw-player-wrapper"
onReady={onReady}
onPlay={onPlayHandler} // for autoStart
onAutoStart={onAutoStartHandler} // for autoStart
isAutoPlay={true} // for autoStart
/>
</div>
);
};
export default JwPlayerBlock;