Quick Start

<div class="video" id="[unique-video-id]"
     style="position:relative;width:100%;padding: 125.0% 0 0;margin:0 auto;">
    <picture style="position:absolute;top:0;left:0;width:100%;height:100%;">
        
        <source srcset="https://scripts.trackplay.io/[unique-video-id]/landscape.jpg" >
        <img src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;">
    </picture>
    <div style="position:absolute;top:0;width:100%;height:100%;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(5px);"></div>
</div>

<script type="text/javascript">
    let trackplay = document.createElement('script');
    trackplay.src = 'https://scripts.trackplay.io/[workspace-id]/[unique-video-id].js';
    trackplay.async = !0, document.head.appendChild(trackplay);

    document.addEventListener('TrackPlayReady', function (e) {
        let player = e.detail.player;
        
        player.on('scroll_cta', () => {
            // handle scroll_cta, called at 00:34:04
        });

        player.on('show_cta', () => {
            // handle show_cta, called at 00:34:04
        });

        player.on('show_cta_subsequent', () => {
            // handle show_cta, called at 00:34:04
            // called at every subsequent visit if the event is already triggered
        });

    });
</script>

document.addEventListener('TrackPlayReady', function (e) {
  let player = e.detail.player;
  
  console.log('TrackPlay player is ready!');
  
  // Now you can listen to any player events
  player.on('eventName', function (data) {
    console.log('Event triggered:', data);
    // Your custom logic here
  });
});

document.addEventListener('TrackPlayReady', function (e) {
  let player = e.detail.player;
  
  // Listen to events
  player.on('eventName', function (data) {
    // Event data is available in data.detail
    console.log('Event data:', data.detail);
  });
});

document.addEventListener('TrackPlayReady', function (e) {
  let player = e.detail.player;
  
  // Video playback events
  player.on('play', function (data) {
    console.log('Video started playing');
  });
  
  player.on('paused', function (data) {
    console.log('Video paused');
  });
  
  player.on('ended', function (data) {
    console.log('Video ended');
  });
  
  // Progress tracking
  player.on('time', function (data) {
    console.log('Current time:', data.detail.time);
    console.log('Duration:', data.detail.duration);
  });
  
  // Orientation changes
  player.on('portrait', function (data) {
    console.log('Video is in portrait mode');
  });
  
  player.on('landscape', function (data) {
    console.log('Video is in landscape mode');
  });
  
  // Overlay events
  player.on('continue-watching', function (data) {
    console.log('Continue watching overlay shown');
  });
});