Custom Player Events
Erika Lehmann avatar
Written by Erika Lehmann
Updated over a week ago

Our Player API is coming soon, but in the meantime, here are all the variables and functions you can utilize at the moment with your Vidalytics embed code.

If you're looking for the App API, you can check it out here.

Please keep in mind that in most cases you'll need a developer to set up this type of customization, and we cannot audit all the changes our users want to apply to their embed codes.

<script>
var EMBED_CODE_ID = 'vidalytics_embed_XXXXXXXXXXXXXXXX'; // update this to match your Vidalytics Embed ID
var vidalyticsPlayerAPI = null;

function initializePlayerAPI() {
console.log('initializePlayerAPI()');
var player = getPlayer();
if (player._player) {
vidalyticsPlayerAPI = player;
onPlayerAPIAvailableCallback();
return;
}

setTimeout(initializePlayerAPI, 100);
}
initializePlayerAPI();

function getPlayer() {
console.log('getPlayer()');
var embeds = (window._vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
return embeds[EMBED_CODE_ID].player || {};
}
return {};
}

function onPlayerAPIAvailableCallback() {
console.log("onPlayerAPIAvailableCallback()");

// do something related to current video playback time
vidalyticsPlayerAPI._player.addEventHandler('onPaused', function () {
console.log('onPaused event');
});
vidalyticsPlayerAPI._player.addEventHandler('onPlay', function () {
console.log('onPlay event');
});
vidalyticsPlayerAPI._player.addEventHandler('onPlaybackFinished', function () {
console.log('onPlaybackFinished event');
});
vidalyticsPlayerAPI._player.addEventHandler('onTimeChanged', function () {
if (vidalyticsPlayerAPI.getCurrentVideoTime() > 5) {
// do something after 5s of playback
}
});

// do something upon play gate submission
vidalyticsPlayerAPI._element.addEventListener('Vidalytics.Player.EVENT_PLAY_GATE', function (e) { console.log('play gate submitted', e.detail); });

// do something when CTA is displayed/hidden
vidalyticsPlayerAPI._element.addEventListener('Vidalytics.Player.EVENT_CTA_DISPLAYED', function (e) { console.log('CTA is displayed', e.detail); });
vidalyticsPlayerAPI._element.addEventListener('Vidalytics.Player.EVENT_CTA_HIDDEN', function (e) { console.log('CTA is hidden', e.detail); });

// do something when viewer enters or exits fullscreen mode "onFullscreenEnter" and "onFullscreenExit"
vidalyticsPlayerAPI._player.addEventHandler('onFullscreenEnter', function () {
console.log('onFullscreenEnter event');
});

// the other available methods are:
// vidalyticsPlayerAPI.play()
// vidalyticsPlayerAPI.pause()
// vidalyticsPlayerAPI.seekTo(timeInSeconds) ie. seekTo(205) would jump to the 3:25 (180s=3m + 25s)
}

</script>


Here is an example of how you can transform our API functions:
โ€‹

if (player.type === "vidalytics") {
var action = {
play: function () { vidalytics.play(); },
pause: function () { vidalytics.pause(); },
stop: function() { vidalytics.seekTo( 0 ); vidalytics.pause(); },
skipAhead: function( seconds ) { vidalytics.seekTo( vidalytics.getCurrentVideoTime() + seconds ); },
skipBack: function( seconds ) { vidalytics.seekTo( vidalytics.getCurrentVideoTime() - seconds ); },
playbackRate: function( rate ) { vidalytics.setPlaybackSpeed(rate); }, // 0.5, 0.75, 1, 1.25, etc.
skipTo: function( time ) { vidalytics.seekTo( time ); },
replay: function() { vidalytics.seekTo( 0 ); },
setup: function () {
// a safe method to initializize the player api
// update this to match your Vidalytics Embed ID
var EMBED_ID = 'vidalytics_embed_XXXXXXXXXXXXXXXX';
function initializePlayerAPI() {
console.log('initializePlayerAPI()');
var player = getPlayer();
if (player._player) {
vidalytics = player;
return;
}
setTimeout(initializePlayerAPI, 100);
}
initializePlayerAPI();
function getPlayer() {
console.log('getPlayer()');
var embeds = (window._vidalytics || {}).embeds || {};
if (embeds[EMBED_ID]) {
return embeds[EMBED_ID].player || {};
}
return {};
}
// this is a shorter version of initialization
// but you need to make sure first if window._vidalytics.embeds[ID] is available
const ID = 'vidalytics_embed_XXXXXXXXXXXXXXXX'
vidalytics = window._vidalytics.embeds[ID].player;
},
ready: function () {
vidalytics._player.addEventHandler('onPaused', function () {
console.log('onPaused event');
});
vidalytics._player.addEventHandler('onPlay', function () {
console.log('onPlay event');
});
vidalytics._player.addEventHandler('onPlaybackFinished', function () {
console.log('onPlaybackFinished event');
});
vidalytics._player.addEventHandler('onTimeChanged', function () {
if (vidalytics.getCurrentVideoTime() > 5) {
// do something after 5s of playback
}
});
}
};
}
Did this answer your question?