embedder API (beta)

Embedder API is a new set of API for third party developers to control WIREWAX player playback, listening to interactivity events, and create shoppable video.

Embedder API is NOT WIREWAX iframe API, embedder API currently is only available when WIREWAX is “advanced JavaScript embedded” to page (BrightCove Plugin v5, JW plugin v5, Vimeo Plugin v5). For iframe embed, please use iframe API for a more stable result.

Features Chart

Here is the chart of features comparison in between WIREWAX Embedder API and WIREWAX iframe API:

FeaturesEmbedder APIiframe API
WIREWAX PlayerPlayer 5Player 4 & 5
ScenariosThird Party Player PluginWIREWAX Player
Multiple instancesYesNo
note

Both iframe API and embedder API don't officially support WIREWAX BrightCove, JW player plugin v4.

important

Embedder API is subject to change as we are in beta testing of this new set API.

API Reference#

Embedder API will be initialized when setting up WIREWAX third party player plugin:

// JW player example
const embedder = new WIREWAX.Embedder('jw-video-container', {
player: jwplayer('jw-video-container'),
});

Playback and Interactivity Events#

play#

This event fires when video starts to play.

Event Data

This event has no associated data.

Examples

const playHandler = () => {
// Logic goes here
}
embedder.on('play', playHandler);

pause#

This event fires when video pauses.

Event Data

This event has no associated data.

Examples

const pauseHandler = () => {
// Logic goes here
}
embedder.on('pause', pauseHandler);

hotspotclick#

This event fires when a hotspot is clicked.

Event Data

PropertyDescription
spriteIdThe unique id for the hotspot sprite (a hotspot can have multiple sprites showing in different timing)
hotspotNameThe hotspot name
actionThe click action of the hotspot: "overlay", "url", "seek" or "none"
actionRefThe action configure of the hotspot
customRefThe custom reference string defined in Studio for the hotspot

Examples

const hotspotclickHandler = (event) => {
// Logic goes here
// event: {
// action: "overlay",
// actionRef: "none",
// customRef: "",
// hotspotName: "COAT",
// spriteId: 6381860
// }
}
embedder.on('hotspotclick', hotspotclickHandler);

overlayshow#

This event fires when an overlay shows.

Event Data

PropertyDescription
overlayIdThe unique id for the overlay
spriteIdThe unique id for the hotspot associated with the overlay
customRefThe custom reference string defined in Studio for the hotspots associated with the overlay
hotspotNameThe hotspot name associated with the overlay

Examples

const overlayshowHandler = (event) => {
// Logic goes here
// event: {
// customRef: "custom reference",
// hotspotName: "hotspot name",
// overlayId: 323710,
// spriteId: 6381860
// }
}
embedder.on('overlayshow', overlayshowHandler);

overlayhide#

This event fires when an overlay hides.

Event Data

PropertyDescription
overlayIdThe unique id for the overlay
spriteIdThe unique id for the hotspot associated with the overlay
customRefThe custom reference string defined in Studio for the hotspots associated with the overlay
hotspotNameThe hotspot name associated with the overlay

Examples

const overlayhideHandler = (event) => {
// Logic goes here
// event: {
// customRef: "custom reference",
// hotspotName: "hotspot name",
// overlayId: 323710,
// spriteId: 6381860
// }
}
embedder.on('overlayhide', overlayhideHandler);

overlayevent#

This event fires when a user interact with panels inside overlay.

Event Data

PropertyDescription
overlayIdThe unique id for the overlay
actionThe click action of the panel within overlay: "addtocart", "url", or "seek"
actionRefThe action configure defined in Studio for the overlay panel

Examples

const overlayeventHandler = (event) => {
// Logic goes here
// event: {
// action: "addToCart"
// actionRef: "38007987994816"
// overlayId: 323710
// }
}
embedder.on('overlayevent', overlayeventHandler);

addtocart#

This event fires when a user interact with an "Add to cart" overlay button. It's same as overlayevent with an action "addtocart"

Event Data

PropertyDescription
overlayIdThe unique id for the overlay
actionThe click action of the panel within overlay: "addtocart"
actionRefThe action configure string defined in Studio for the "Add to cart" button

Examples

const addtocartHandler = (event) => {
// Logic goes here
// event: {
// action: "addToCart"
// actionRef: "38007987994816"
// overlayId: 323710
// }
}
embedder.on('addtocart', addtocartHandler);

Events coming soon in next build#

  • ready
  • seeked
  • ended

Currently those events could come from third party player side.

Methods for playback control#

play()#

The method will set both third party video player and WIREWAX plugin to playing mode.

Example

embedder.play()

pause()#

The method will set both third party video player and WIREWAX plugin to pause mode.

Example

embedder.pause()

seek()#

The method will set both third party video player and WIREWAX plugin to a certain FRAME. For seconds as seeking unit, please refer to third party player seek methods.

Example

const frames = 100; // int
embedder.seek(frames)

Methods coming soon in next build#

  • getHotspots()
  • getOverlays()
  • getCurrentTime()
  • setMute()
  • getMute()
  • ready()
  • gotoHotspot()
  • triggerHotspot()