Complete external config implementation

This page is an example of using Prebid Video with a Targetvideo outstream unit.

This page contains:

Setting up Targetvideo outstream unit to dynamically play ads.
Using a cloud-hosted player.
Dynamically insert a preroll ad into the outstream unit.

Example

Add the following script tags in the head area of your web page:

<!-- prebid.js -->
  <script src="https://acdn.adnxs.com/prebid/not-for-prod/prebid.js" async=true></script>

<!-- <<company>> Player -->
<script type="text/javascript" src="//<<services_domain>>/player/build/<<outstream_script>>"></script>

<script>
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];

    // define invokeVideoPlayer in advance in case we get the bids back from prebid before the entire page loads
    var tempTag = false;
    var invokeVideoPlayer = function(url){
      tempTag = url;
    }

    /*
    Prebid Video adUnit
    */

    var videoAdUnit = {
      code: 'video1',
      sizes: [640,480],
      mediaTypes: {
        video: {
          context: "outstream"
        }
      },
      bids: [
        {
          bidder: 'appnexusAst',
          params: {
            placementId: '9333431', // 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({ 
        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"
                  }
              });
              invokeVideoPlayer(videoUrl);
          }
      });
    });

    pbjs.bidderSettings =
    {
        standard: {
            adserverTargeting: [
                {
                    key: "hb_bidder",
                    val: function (bidResponse) {
                        return bidResponse.bidderCode;
                    }
                }, {
                    key: "hb_adid",
                    val: function (bidResponse) {
                        return bidResponse.adId;
                    }
                }, {
                    key: "hb_pb",
                    val: function (bidResponse) {
                        return "10.00";
                    }
                }, {
                    key: "hb_size",
                    val: function (bidResponse) {
                        return bidResponse.size;

                    }
                }
            ]
        }
    };

  </script>

Add the following code on your web page where you wish the outstream unit to display.

<div id="myDiv" class="brid" style="width:640px; height:480px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> </div>
    <script type="text/javascript">
      invokeVideoPlayer = function(url) {
        $bp("myDiv", {"id":"UNIT_ID","width":"640","height":"360",
        "Ad": [
                {
                    "mobile": url, // Array of url's will get called in succession on mobile
        						"desktop": null, // Array of url's will get called in succession on desktop
                    "adType": "0", // Type 0 for pre roll
                }
            ]
        }); 
      }
    </script>