video example

by staplen

HTML

<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<!-- Note: 'playback-id' is the the alphanumeric string immediately preceding .m3u8 in the Kevel Asset Content URL -->
	<mux-player
		playback-id="wWactyV6ZZ1MLZgGoI4OkTbS01BqcHw1rGdvUNyEtGBU"
		accent-color="#DA3319"
    loop="true"
	></mux-player>

CSS

mux-player {
	height: 318px;
	width: 565px;

	/* Show play and mute buttons */
	--play-button: block;
	--mute-button: block;

	/* Hide all other video play controls */
	--live-button: none;
	--seek-backward-button: none;
	--seek-forward-button: none;
	--captions-button: none;
	--airplay-button: none;
	--pip-button: none;
	--fullscreen-button: none;
	--cast-button: none;
	--playback-rate-button: none;
	--volume-range: none;
	--time-range: none;
	--time-display: none;
	--title-display: none;
	--duration-display: none;
	--rendition-selectmenu: none;
}

JavaScript

// Get reference to the video element
var video = document.querySelector("mux-player");

// Track which percentages have been reached
var percentagesReached = {
  '0': false,
  '25': false,
  '50': false,
  '75': false,
  '100': false
};

// Event pixels returned from Decision Request, passed through to front-end [replace with your real URLs]
var kevelEventPixels = [{
  "id": 70,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...VYsE"
}, {
  "id": 71,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...yAmA"
}, {
  "id": 72,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...nJDE"
}, {
  "id": 73,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...6aDQ"
}, {
  "id": 74,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...QrXws"
}, {
  "id": 75,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...crkM"
}, {
  "id": 76,
  "url": "https://e-18555.adzerk.net/e.gif?e=eyJ2Ijo...-Iuc"
}];

// Given a Kevel event ID, get its pixel (url) and trigger it using an image element
function trackEvent(eventId) {
  const eventUrl = kevelEventPixels.find(item => item.id === eventId)?.url;
  if (eventUrl) {
    var img = new Image();
    img.src = eventUrl;
    console.log('triggered event', eventId);
  }
}

// Function to check and fire events for specific playback percentages
function trackPlaybackChange() {
  var currentTime = video.currentTime;
  var duration = video.duration;
  var currentPercentage = (currentTime / duration) * 100;
  //console.log('current percentage', currentPercentage);

  // Check if any video playback has occurred and fire event
  if (currentTime > 0 && !percentagesReached['0']) {
    console.log('playback started');
    trackEvent(70);
    percentagesReached['0'] = true;
  }

  // Check if 25% has been reached and fire event
  if (currentPercentage >= 25 && !percentagesReached['25']) {
    console.log('25% playback reached');
    trackEvent(71);
    percentagesReached['25'] = true;
  }

  // Check if 50% has been reached and fire...