Prebid Video | Instream Example with Flowplayer

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

Important:

Important: This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.

The button will be enabled only during ads

Warning: Do not forget to exchange the placementId in the code examples with your own placementId!

Place this code in the page header.


<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/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',
          playerSize: [640, 480],
          mimes: ['video/mp4'],
          protocols: [1, 2, 3, 4, 5, 6, 7, 8],
          playbackmethod: [2],
          skip: 1
      }
    },
    bids: [
      {
        bidder: 'appnexus',
        params: {
          placementId: '13232361'  // Add your own placement id here

        }
      }
    ]
  };

  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>