Skippable ads in Cloudflare Stream Player

Has anyone successfully implemented a ‘skip ad’ element to the Cloudflare Stream Player?
I’ve got a 15 second countdown running via the stream-adend Non-standard event.
However, no success skipping the ad-url after any duration. My set-up causes the main video to skip to end, not the advertisment.
Here’s my code if anyone wants to take a look:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const player = Stream(document.getElementById('stream-player'));
    player.autoplay = false; // Set autoplay to false

    const adTimerContainer = document.createElement('div');
    adTimerContainer.style.position = 'absolute';
    adTimerContainer.style.top = '10px';
    adTimerContainer.style.right = '10px';
    adTimerContainer.style.padding = '5px 10px';
    adTimerContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    adTimerContainer.style.color = '#fff';
    adTimerContainer.style.fontSize = '16px';
    adTimerContainer.style.borderRadius = '5px';
    adTimerContainer.style.zIndex = '10';
    adTimerContainer.style.display = 'none';
    adTimerContainer.style.cursor = 'pointer';
    document.getElementById('ad-container').appendChild(adTimerContainer);

    player.addEventListener('play', () => {
      console.log('playing!');
    });

    let skipAdEnabled = false;
    
    adTimerContainer.addEventListener('click', () => {
      if (skipAdEnabled) {
        player.currentTime = player.duration; // This is a workaround to skip the ad
        console.log('Ad skipped');
      }
    });

    player.addEventListener('stream-adstart', () => {
      console.log('Ad started');
      let timeLeft = 10; // Changed to 10 seconds
      adTimerContainer.innerHTML = `Ad: ${timeLeft}s`;
      adTimerContainer.style.display = 'block';
      skipAdEnabled = false;

      const countdown = setInterval(() => {
        timeLeft -= 1;
        adTimerContainer.innerHTML = `Ad: ${timeLeft}s ${timeLeft === 0 ? '(Click to Skip)' : ''}`;

        if (timeLeft <= 0) {
          clearInterval(countdown);
          skipAdEnabled = true;
        }
      }, 1000);
    });

    player.addEventListener('stream-adend', () => {
      console.log('Ad ended');
      adTimerContainer.style.display = 'none';
    });
  });

I have no experience, but I noticed something
let skipAdEnabled = false;
Change to
let skipAdEnabled = true ;
Try it, you might succeed

Thank you. It’s a good pick-up : )
I’d solved this a few days ago with a different approach but certainly appreciate the time you’ve taken :smiley:

Can I get the code that successfully ran the ad, thank you

No problem. We used Fluid Player: https://www.fluidplayer.com/

<!-- Fluidplayer.min.js the header of page -->
  <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

<!-- video player in page body -->
<video id="player" style="width: 100%; height: auto;" poster="[insert poster image url]" preload="metadata">
      <!-- DASH-Playlist location -->
      <source src="https://customer-[insert Cloudflare customer-ID].cloudflarestream.com/[insert Cloudflare video id] /manifest/video.mpd" type="application/dash+xml">
      <!-- HLS-Playlist location -->
      <source src="https://customer-[insert Cloudflare customer-ID].cloudflarestream.com/[insert Cloudflare video id]" type="application/x-mpegURL">
      <p>
        To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
      </p>
    </video>

<!-- Fluid video player SDK in footer -->
<script async>
    /* Initialize Fluid Player */
    fluidPlayer(
      'player',
      /* Options */
      {
        layoutControls: {

primaryColor: "#1d395a", // Customize the primary color
		preload: "metadata", // Default 'auto'
		fillToContainer: true,
		autoPlay: false, // Set to true if you want to auto play the video
		playbackRateEnabled: true,
		allowTheatre: false,
		controlBar: {
    autoHide: true,
    autoHideTimeout: 3,
    animated: true,
    posterImage: '[insert poster image url]',
    posterImageSize: 'cover' // Default `contain`
        },
      },
      	vastOptions: {
		vastTimeout: 5000, // Milliseconds to wait for VAST to load
		adList: [
			{
				roll: "preRoll", // preRoll, midRoll, postRoll
				vastTag:
					"[insert video ad url from ad server]",
			},
		],
	},
    });
  </script>


1 Like