Getting Started

To use the Player API, you need to initialize it. Since Vidalytics embeds are initialized asynchronously, we recommend the following pattern to initialize the Player API:

<div id="vidalytics_embed_5LI9f8OC1bFDzl9W" style="width: 100%; position:relative; padding-top: 56.25%;"></div>
<script type="text/javascript">
  (function (v, i, d, a, l, y, t, c, s) {
    y='_'+d.toLowerCase();c=d+'L';if(!v[d]){v[d]={};}if(!v[c]){v[c]={};}if(!v[y]){v[y]={};}var vl='Loader',vli=v[y][vl],vsl=v[c][vl + 'Script'],vlf=v[c][vl + 'Loaded'],ve='Embed';
    if (!vsl){vsl=function(u,cb){
      if(t){cb();return;}s=i.createElement("script");s.type="text/javascript";s.async=1;s.src=u;
      if(s.readyState){s.onreadystatechange=function(){if(s.readyState==="loaded"||s.readyState=="complete"){s.onreadystatechange=null;vlf=1;cb();}};}else{s.onload=function(){vlf=1;cb();};}
      i.getElementsByTagName("head")[0].appendChild(s);
    };}
    vsl(l+'loader.min.js',function(){if(!vli){var vlc=v[c][vl];vli=new vlc();}vli.loadScript(l+'player.min.js',function(){var vec=v[d][ve];t=new vec();t.run(a);});});
  })(window, document, 'Vidalytics', 'vidalytics_embed_5LI9f8OC1bFDzl9W', 'https://quick.vidalytics.com/embeds/sXFEYTDU/5LI9f8OC1bFDzl9W/');
</script>

<script>
  const EMBED_ID = 'vidalytics_embed_5LI9f8OC1bFDzl9W';

  !function(v,a,p,i){
    v.getVidalyticsPlayer=n=>{v[a]=v[a]||{},v[a][p]=v[a][p]||{};let d=v[a][p][n]=v[a][p][n]||{};
    return new Promise((e=>{if(d[i])return void e(d[i]);let t;
    Object.defineProperty(d,i,{get:()=>t,set(i){t=i,e(i)}})}))}
  }(window,'_vidalytics','embeds','player');

  getVidalyticsPlayer(EMBED_ID).then(player => {
    if (!player) return;

    // do something related to current video playback time

    player.on('play', () => {
      console.log('Player was played.');
    });

    player.on('pause', () => {
      console.log('Player was paused.');
    });

    player.on('ended', () => {
      console.log('Player playback has ended.');
    });

    // do something after 5s of playback

    let isTimeTrapTriggered = false;

    player.on('timeupdate', () => {
      if (isTimeTrapTriggered) return;
      const currentTime = Math.floor(player.currentTime());
      if (currentTime === 5) {
        isTimeTrapTriggered = true;
        console.log('Player playback reached 5 seconds.', player);
      }
    });

    // do something upon play gate submission

    player.on('playgate:submit', (id, data) => {
      console.log('Playgate was submitted.', id, data);
    });

    // do something when CTA is shown/hidden

    player.on('cta:show', (cta) => {
      console.log('CTA was shown.', cta);
    });

    player.on('cta:hide', (cta) => {
      console.log('CTA was hidden.', cta);
    });

    // do something when viewer enters or exits fullscreen mode

    player.on('enterfullscreen', () => {
      console.log('Player entered fullscreen.');
    });

    player.on('exitfullscreen', () => {
      console.log('Player exited fullscreen.');
    });
  });
</script>

Here's what's happening:

1. This part is a regular embed code you can grab on dashboard:

<div id="vidalytics_embed_5LI9f8OC1bFDzl9W" style="width: 100%; position:relative; padding-top: 56.25%;"></div>
<script type="text/javascript">
  (function (v, i, d, a, l, y, t, c, s) {
    y='_'+d.toLowerCase();c=d+'L';if(!v[d]){v[d]={};}if(!v[c]){v[c]={};}if(!v[y]){v[y]={};}var vl='Loader',vli=v[y][vl],vsl=v[c][vl + 'Script'],vlf=v[c][vl + 'Loaded'],ve='Embed';
    if (!vsl){vsl=function(u,cb){
      if(t){cb();return;}s=i.createElement("script");s.type="text/javascript";s.async=1;s.src=u;
      if(s.readyState){s.onreadystatechange=function(){if(s.readyState==="loaded"||s.readyState=="complete"){s.onreadystatechange=null;vlf=1;cb();}};}else{s.onload=function(){vlf=1;cb();};}
      i.getElementsByTagName("head")[0].appendChild(s);
    };}
    vsl(l+'loader.min.js',function(){if(!vli){var vlc=v[c][vl];vli=new vlc();}vli.loadScript(l+'player.min.js',function(){var vec=v[d][ve];t=new vec();t.run(a);});});
  })(window, document, 'Vidalytics', 'vidalytics_embed_5LI9f8OC1bFDzl9W', 'https://quick.vidalytics.com/embeds/sXFEYTDU/5LI9f8OC1bFDzl9W/');
</script>

2. Make sure you update EMBED_ID to match your Vidalytics Embed ID:

const EMBED_ID = 'vidalytics_embed_5LI9f8OC1bFDzl9W';

3. This part is responsible for the following things:

• Waits until player object becomes available in browser
• Returns getVidalyticsPlayer() function that watches until Player API becomes ready.

!function(v,a,p,i){
  v.getVidalyticsPlayer=n=>{v[a]=v[a]||{},v[a][p]=v[a][p]||{};let d=v[a][p][n]=v[a][p][n]||{};
  return new Promise((e=>{if(d[i])return void e(d[i]);let t;
  Object.defineProperty(d,i,{get:()=>t,set(i){t=i,e(i)}})}))}
}(window,'_vidalytics','embeds','player');

4. Pass your EMBED_ID into getVidalyticsPlayer() function.

• getVidalyticsPlayer() function returns Promise which is fullfilled when Player API becomes ready.
• Then you can use player object to attach event listeners and execute player methods:

getVidalyticsPlayer(EMBED_ID).then(player => {
  if (!player) return;

  // some code here
});