Prebid Video | Instream Example with Flowplayer

An example of an instream pre-roll ad using Cross-Player Prebid Communication Component and Flowplayer.

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!

To allow the Cross-Player plugin to load your custom build of Prebid.js ensure that the option key `prebidPath` is set to the custom build's location. If `prebidPath` is not set, the plugin will point to `//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js`.

Place this code in the page header.


<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 type="text/javascript">
  var options = {
    biddersSpec: {
      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 

            }
          }
        }
      ]
    },
    prebidConfigOptions: {
      cache: {
        url: 'https://prebid.adnxs.com/pbc/v1/cache'
      }
    },
    dfpParameters: {
      params: {
        iu: '/19968336/prebid_cache_video_adunit',
        cust_params: {
          section: "blog",
          anotherKey: "anotherValue"
        },
        output: "vast"
      }
    },
  };
  function doHeaderBidding() {
    window.prebidPluginCP.doPrebid(options);
  }

</script>
<script src="//acdn.adnxs.com/video/plugins/cp/PrebidPluginCP.min.js" onload="doHeaderBidding()"></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 messageId = 100;
var asyncTag = function() {
  var message = {
    command: 'PPCP:prebidRequest',
    messageId: ++messageId
  };
  return new Promise(function(resolve) {
    var listener = function(event) {
      if (event && event.data) {
        var data = JSON.parse(event.data);
        if (data.command === 'PPCP:prebidResponse' && data.messageId === messageId) {
          window.removeEventListener('message', listener);
          if (data.url && data.url != 'failed') {
            resolve(data.url);
          }
          else {
            resolve(null);
          }
        }
      }
    };
    window.addEventListener('message', listener);
    top.postMessage(JSON.stringify(message), '*');
    setTimeout(function() {
      window.removeEventListener('message', listener);
      resolve(null);
    }, 2000);
  })
}


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>