iframe API Quick Start

tip

WIREWAX iframe API is designed for iframe embed solution.

WIREWAX JW plugin and BrightCove JS plugin are using JavaScript embed solution, currently are not supported by WIREWAX iframe API.

important

Breaking Change (Oct 26, 2020): WIREWAX has updated iframe API CDN for Player5, please reference to our CDN for an up-to-date version as below.

If you are using Player5(embed link is embedder.wirewax.com), you could safely switch to the new CDN without change any code.

<!-- Player 5 CDN link -->
<script type="text/javascript" src="//iframe.wirewax.com/wirewax-api.min.js"></script>

If you are using Player4(embed link is embed.wirewax.com ), please keep using the old CDN to avoid breaking changes.

<!-- Player 4 CDN link -->
<script type="text/javascript" src="//edge-player.wirewax.com/ww4release/javascripts/wirewax-iframe-api.js"></script>
note

No more new features will be added for Player4 iframe API.

Overview#

The Iframe API lets you control the iframe embed WIREWAX video player on your website using JavaScript.

Using the API's JavaScript functions, you can control video play, pause, seek, adjust volume, or retrieve information about the video play state. You can also add event listeners that will execute in response to certain WIREWAX video events, such as player state change, interaction state change. To showcase the usage, we created a Live Demo on CodeSandbox.

Requirements#

The user's browser must support the HTML 5 postMessage feature. Most browsers support this feature, we recommend using the latest Chrome browser for development and test.

WIREWAX iframe API is designed and developed to pair with WIREWAX player iframe embed solution. Currently it doesn't support WIREWAX third party player plugins or third party player JS embed.

Installation#

  1. Insert plugin script to the HTML head of your site.
<head>
<!-- ... -->
<!-- WIREWAX iframe API script: Player 4 (Old Player) -->
<script type="text/javascript" src="//edge-player.wirewax.com/ww4release/javascripts/wirewax-iframe-api.js"></script>
<!-- WIREWAX iframe API script: Player 5 (New Player) -->
<script type="text/javascript" src="//iframe.wirewax.com/wirewax-api.min.js"></script>
<!-- ... -->
</head>
  1. Set an id to your WIREWAX iframe element. The default is wirewax-player, you can change this by setting the window.wirewax.playerId variable. An error will be thrown in the JavaScript Console if the iframe is not found.
<!-- Set the playerId in a script -->
<script type="text/javascript">
window.wirewax.playerId = "wirewax-player";
</script>
<!-- WIREWAX embed iframe element: Player 4 (Old Player) -->
<iframe id="wirewax-player" src="//embed.wirewax.com/YOUR_VIDEO_ID/"></iframe>
<!-- WIREWAX embed iframe element: Player 5 (New Player) -->
<iframe id="wirewax-player" src="//embedder.wirewax.com/YOUR_VIDEO_ID/"></iframe>
tip

WIREWAX currently has two versions of player being used by clients:

  • Player 4 (Old Player): embed src URL starts with embed.wirewax.com
  • Player 5 (New Player): embed src URL starts with embedder.wirewax.com

Player 5 script is backwards compatible with Player 4 iframe API.

Methods#

wirewax.triggerEvent#

triggerEvent functions allow you to control WIREWAX video playback and interactions.

Syntax:

window.wirewax.triggerEvent(eventName, data)

Parameters:

Example:

// Play the video
window.wirewax.triggerEvent(window.wirewax.events.triggers.PLAY);
// Seek to 20 seconds
window.wirewax.triggerEvent(window.wirewax.events.triggers.SEEK, 20);
tip

WIREWAX Player will only start accepting events once it is ready. You can check this by listening for the "PLAYER_READY" event.

wirewax.addEventListener#

addEventListener functions allow you to listen for the WIREWAX player states change and interaction events, and add event handlers.

Syntax:

window.wirewax.addEventListener(eventName, callback)

Parameters:

Example:

// Listen for the player to be ready
window.wirewax.addEventListener(window.wirewax.events.listeners.PLAYER_READY, function() {
// PLAYER IS READY
})
// Listen for the tag click interaction
window.wirewax.addEventListener(window.wirewax.events.listeners.TAG_CLICK, function(data) {
// HOTSPOT IS CLICKED
})

wirewax.enableGyro (Player 4 only)#

To enable gyro for 360 videos you can call window.wirewax.enableGyro() which will save you the work to listen to all the device events and call our triggers.

Syntax:

window.wirewax.enableGyro()
warning

This method is used for Player 4 customization projects only, and deprecated in Player 5.

Edit this page