Skippable ads in Cloudflare Stream Player

Developers Stream
8

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