Prebid Video | Instream Example with FlowPlayer

An example of an instream pre-roll ad using Prebid.js and FlowPlayer.

The button will be enabled only during ads

Place this code in the page header.

	
	
	<script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
	<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
	<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
	<script src="//cdn.flowplayer.com/releases/native/stable/plugins/ads.min.js"></script>
	<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
	<style>
	    #player {
	        max-width: 40em;
	        width: 100%;
	        float: left;
	    }
	
	    #controls {
	        float: left;
	        padding: 1em;
	    }
	</style>
	<script>
	  var pbjs = pbjs || {};
	  pbjs.que = pbjs.que || [];
	
	  // The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.  
	  // We return the ad tag if it is available before the player is ready to play  
	  // Otherwise the player waits for 2 secs for tag to be available.
var adtag = null var timeout = 2000 var asyncTag = function() { if (adtag) return Promise.resolve(adtag) return new Promise(function (resolve) { setTimeout(function() { resolve(adtag) }, timeout) }) } /* Prebid Video adUnit */ var videoAdUnit = { code: 'video1', sizes: [640,480], mediaTypes: { video: { context: "instream" } }, bids: [ { bidder: 'appnexus', params: { placementId: '13232361', // Add your own placement id here video: { skipppable: true, playback_method: ['auto_play_sound_off'] } } } ] }; pbjs.que.push(function(){ pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request pbjs.setConfig({ debug: true, cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' } }); pbjs.requestBids({ bidsBackHandler: function(bids) { var videoUrl = pbjs.adServers.dfp.buildVideoUrl({ adUnit: videoAdUnit, params: { iu: '/19968336/prebid_cache_video_adunit', cust_params: { section: "blog", anotherKey: "anotherValue" }, output: "vast" } }); adtag = videoUrl; } }); }); </script>

Place this code in the page body.

	
	<div id="player"></div>
	<!--video player div-->
	<div id="player"></div>
	<div id="controls">
	    <button id="ad-toggle" disabled>
	        Toggle ad playback
	    </button>
	    <p>The button will be enabled only during ads</p>
	</div>
		
	<script type="text/javascript">
	  var player = flowplayer('#player', {
	    src: "//edge.flowplayer.org/drive.mp4",
	    title: "Flowplayer demo",
	    description: "Demo showing ads",
	    autoplay: true,
	    ima: {
	      ads: [
	        {"time":0,"adTag":asyncTag}
	      ]
	    },
	    token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
	  })
	  
	  var btn = document.querySelector('#ad-toggle');
	
	  btn.addEventListener('click', function() {
	    if (player.ads.adPlaying) player.ads.pause();
	    else player.ads.resume();
	  })
	
	  function toggleDisabled(disabled) {
	    return function() { btn.disabled = disabled }
	  }
	
	  player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
	  player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
	  player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));
	
	</script>