To embed the Voltax Player on your page, follow these steps:
MM Integration:
Add the following <script> tag within your HTML file, replacing MM_REFERER_URL with
the referring page:
<script
src="https://players.voltaxservices.io/players/1/codemm-referer={MM_REFERER_URL
}"></script>
STN Integration:
Insert the following element into your HTML, replacing STN_PLAYER_KEY with your specific player key:
<div data-stn-player="STN_PLAYER_KEY"></div>Note: data-stn-player attribute: Set this attribute to your unique player key to identify and configure the player for your content.
- Include the Player Script:
<script async type="text/javascript"
src="https://embed.sendtonews.com/player3/embedcode.js?fk=STN_PLAYER_KEY"></scr
ipt> fk attribute: Set this attribute to your unique player key to identify and configure the player for your content.
Obtaining an Existing Player Instance
Once loaded, the player exposes an object on the window called "voltax". This is how you can access the video player's API. To obtain a player instance:
- Get all Voltax players on the page:
const vplayers = voltax.getAllPlayersOnPage(); // Array of existing playersNote: If you're not using the SDK (meaning you've loaded the player onto the page using a script, as mentioned here) then you will have to first make sure that the Voltax API has already loaded. Below is an example of how to handle such cases. The "voltaxPlayerLoaded" API event is triggered as soon as a player initializes on the page, whether by using the createPlayer function, or by loading a player using the script:
if (window.voltax) { const vplayers = window.voltax.getAllPlayersOnPage(); vplayers.forEach(vplayer = { vplayer.on('play', params = { // run your code here }) }); } else { window.addEventListener('voltaxPlayerLoaded', () = { const vplayers = window.voltax.getAllPlayersOnPage(); vplayers.forEach(vplayer = { vplayer.on('play', params = { // run your code here }) }); });
Video Player Playback Events API
| EVENT NAME | CALLBACK OBJECT | DETAILS |
on('ready')
Fires when the video player is initialized and ready to play. | See Video Event Callback Object | vplayer.on('ready', () => { // run your code here }) |
on('play')
Fires when the video player has started play. | See Video Event Callback Object | vplayer.on('play', () => { // run your code here }) |
on('pause')
Fires when the video player has paused play. | See Video Event Callback Object | vplayer.on('pause', () => { // run your code here }) |
on('seek')
Fires when the video player seek bar has been accessed.
Extra field in the callback object: newTime. | See Video Event Callback Object | vplayer.on('seek', () => { // run your code here }) |
on('videoComplete')
Fires when the video content has completed play. | See Video Event Callback Object | vplayer.on('videoComplete', () => { // run your code here }) |
on('videoError')
Fires when the video player failed to play a content asset. | See Video Event Callback Object | vplayer.on('videoError', () => { // run your code here }) |
on('videoChange')
| See Video Event Callback Object | vplayer.on('videoChange', () => { |
| Fires when the video player switches from one video content asset to another within the playlist. | // run your code here }) | |
on('fullScreenChange')
Fires when the full screen viewing mode has been enabled or disabled.
Extra field in the callback object: enabled. | See Video Event Callback Object | vplayer.on('fullScreenChang e', () => { // run your code here }) |
on('playerError')
Fires when the video player encountered an error.
Extra field in the callback object: message. | See Video Event Callback Object | vplayer.on('playerError', () => { // run your code here }) |
on('playerSetupError')
Fires when The Video Player fails to initialize. | See Video Event Callback Object | vplayer.on('playerSetupErro r', () => { // run your code here }) |
on('adImpression')
Fires when a video ad impression was logged. | See Ad Event Callback Object | vplayer.on('adImpression', () => { // run your code here }) |
on('adError')
Fires when a video ad encountered an error.
Extra field in the callback object: message. | See Ad Event Callback Object | vplayer.on('adError', () => { // run your code here }) |
on('adPlay')
Fires when a video ad began to play. | See Ad Event Callback Object | vplayer.on('adPlay', () => { // run your code here }) |
on('adComplete')
Fires when a video ad completed its play. | See Ad Event Callback Object | vplayer.on('adComplete', () => { // run your code here }) |
| on('adSkipped') | See Ad Event Callback Object | vplayer.on('adSkipped', () => { // run your code here }) |
on('adPaused')
Fires when a video ad was was skipped by the user. | See Ad Event Callback Object | vplayer.on('adPaused', () => { // run your code here }) |
on('firstBidReceived')
| See Ad Event Callback Object | vplayer.on('firstBidReceived', |
Callback Objects
An object item such as “event” may contain its own object or array as well. These are just the top-level items.
Video Event Callback Object
{ event, elementID, playerID, mediaID, mediaTitle, playlistID, livestream,}
Ad Event Callback Object
{ event, elementID, playerID, ad, // adEvent object tag, // ad tag title, advertiser, creativeID, lineItemID, cpm, bidResponse, // bid response object }