OpenWrap Client-Side Video

Use this guide to set up your video inventory for client-side bidding and rendering using PubMatic's OpenWrap Client Side JavaScript solution. The solution implements a custom JavaScript server through the following five steps:

  1. Setup your OpenWrap profile
  2. Upload slot config for video
  3. Page setup
  4. Test the setup
  5. Sample pages

DFP is now Google Ad Manager (GAM)

When you see DFP mentioned in this guide, it is referring to GAM.

1. Set up your OpenWrap profile

Client-side video requires a display profile from the OpenWrap profile configuration UI. Use the OpenWrap Profile Management guide to set up your OpenWrap profile.

2. Upload slot config for video

For client-side video you must also upload a slot (ad unit) configuration to define video parameters per the, OpenRTB API Specification Version 2.5.

While uploading the mapping for the partner, be sure to add an entry for size, 0x0; for example, when selecting a template for AdUnit Size, then add an AdUnit1 property, set the size as, 0x0, then add the partner parameters.

After uploading the mapping, be sure to upload the slot configuration for your video inventory. Learn more about slot configuration at, VAST bidder tag management.

PlayerSize for Prebid 4.x and later

Prebid 4.x and later requires the playerSize parameter as part of the video ad unit conifg.  If using PWT.generateConfForGPT() to generate your ad unit array, put playerSize in your ad unit config when you add it to the profile.  If manually creating your ad unit array, add playerSize under mediaTypes.video.playerSize.


Sample ad unit configuration JSON
{
        "configPattern": "_DIV_",
        "config": {
            "Div1": {
                "banner": {
                    "enabled": false
                },
                "native": {
                    "enabled": false,
                    "config": {
                        "image": {
                            "required": true,
                            "sizes": [150, 50]
                        },
                        "title": {
                            "required": true,
                            "len": 80
                        },
                        "sponsoredBy": {
                            "required": true
                        },
                        "body": {
                            "required": true
                        }
                    }
                },
                "video": {
                    "enabled": true,
                    "config": {
                        "context":"instream",
                        "connectiontype": [1, 2, 6],
                        "minduration": 10,
                        "maxduration": 50,
                        "battr": [
                            6,
                            7
                        ],
                        "skip": 1,
                        "skipmin": 10,
                        "skipafter": 15,
                        "w": 640,  // Required for Prebid 3.x
                        "h": 480,  // Required for Prebid 3.x
                        "playerSize": [640,480]  // Required for Prebid 4.x
                    }
                }
            },
            "default": {
                "banner": {
                    "enabled": false
                },
                "native": {
                    "enabled": false,
                    "config": {
                        "image": {
                            "required": true,
                            "sizes": [150, 50]
                        },
                        "title": {
                            "required": true,
                            "len": 80
                        },
                        "sponsoredBy": {
                            "required": true
                        },
                        "body": {
                            "required": true
                        }
                    }
                },
                "video": {
                    "enabled": true,
                    "config": {
                        "context":"instream",
                        "connectiontype": [1, 2, 6],
                        "minduration": 10,
                        "maxduration": 50,
                        "battr": [
                            6,
                            7
                        ],
                        "skip": 1,
                        "skipmin": 10,
                        "skipafter": 15,
                        "w": 640,  // Required for Prebid 3.x
                        "h": 480,  // Required for Prebid 3.x
                        "playerSize": [640,480]  // Required for Prebid 4.x
                    }
                }
            }
        }
    }

3. Page setup

Currently client-side video requires JavaScript API setup. The OpenWrap JavaScript API guide details the process of setting up the API, which follows these steps:

  1. Setup the video player.
  2. Load PWT.js.
  3. Generate AdUnit object (from your video inventory).
  4. Execute PWT.requestBids with the adUnit object from step 3.
  5. in the requestBids callback, call PWT.generateDfpUrl() with the video adUnit.
  6. Initialize the videoPlayer with the adUrl returned in step 4 and your video PlayBackUrl.

4. Test the setup

If you have followed the steps 1 through 3 correctly you will see a bid call to PubMatic with video the impression. If it returns a valid bid, then you will get a video url, a video player initialized with the video ad, and yous can check the videoUrl.

5. Sample pages

The following sample pages let you test various video configurations.

    1. Single video slot HTML

      Single video slot HTML
      <!DOCTYPE HTML>
      <html lang="en-us">
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>NON SRA</title>
          <!-- videojs -->
          <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
          <!-- videojs-vast-vpaid -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css"
              rel="stylesheet">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
           
          <!-- Loading Asynchronously -->
          <script type="text/javascript">
              Array.$constructor = function () {
                  for (i = 0; i < this.length; i++) {
                      this[i] = this[i].toUpperCase();
                  }
              };
          </script>
          <script type="text/javascript">
              (function () {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2130'; // Update PUB_ID & PROF_ID
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
           
          <script type='text/javascript'>
              var googletag = googletag || {};
              googletag.cmd = googletag.cmd || [];
              var PWT = {}; //Initialize Namespace
              PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                  var gads = document.createElement('script');
                  gads.type = "text/javascript";
                  gads.async = true;
                  gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(gads, node);
              };
          </script>
           
          <script type="text/javascript">
              googletag.cmd.push(function () {
       
                  var s2 = googletag.defineSlot('/43743431/QAVideo', [
                      [640, 480]
                  ], 'Div1').addService(googletag.pubads());
                  s2.setTargeting('a', [1]);
                  s2.setTargeting('b', [2]);
                  s2.setTargeting('c', 3);
                  s2.setTargeting('d', ['a', 'b', 'c']);
                  // var s2 = googletag.defineSlot('/43743431/DMDemo1', [
                  //  [728, 90]
                  // ], 'Div2').addService(googletag.pubads());
                  // s2.setTargeting('aa', [11]);
                  // s2.setTargeting('bb', [22]);
                  // s2.setTargeting('dd', ['aa', 'bb', 'cc']);
                   
       
                   
                  // common targetings
                  googletag.pubads().setTargeting('v', 'classifieds');
                  googletag.pubads().setTargeting('cpage', 'browseads');
                  googletag.pubads().setTargeting('article-id', '65207');
                  googletag.pubads().setTargeting('automation', '1');
                  googletag.enableServices();
                  if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                      PWT.requestBids(
                          PWT.generateConfForGPT(googletag.pubads().getSlots()),
                          function (adUnitsArray) {
                              console.log("AdUnitsArray", adUnitsArray);
                              // PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                              // googletag.display('Div1');
                              // googletag.display('Div2');
                               
                              var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                  section: 'blog',
                                  anotherKey: 'anotherValue'
                              });
                              invokeVideoPlayer(videoUrl);
       
                          }
                      );
                  }
              });
          </script>
      </head>
      <body>
           
          <h2>OpenWrap - Prebid Video -- video.js</h2>
           
          <div class="example-video-container" id='Div1'>
               
              <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
           
           
          <script>
              var page_load_time;
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loading!");
              var vid1 = videojs('vid1');
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loaded!");
              function invokeVideoPlayer(url) {
                   
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
                   
                  videojs("vid1").ready(function () {
                       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
                       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 10000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
                      player.muted(true);
                      player.play();
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
                  });
              }
          </script>
      </body>
       
      </html>
    2. Single video slot without GPT

      Single video slot without GPT
      <!DOCTYPE html>
      <html>
      
      <head>
          <link rel="icon" type="image/png" href="/favicon.png">
          <meta charset="utf-8" />
          <title>OpenWrap Client-Side Video -- video.js with IMA</title>
      
          <!-- Load dependent stylesheets. -->
          <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
          <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
          <link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
      
          <style type="text/css">
              body {
                  font-family: sans-serif;
              }
          </style>
      
          <script type="text/javascript">
              var PWT = {};
              (function() {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/156276/2146';
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  //wtads.async = false;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
      </head>
      
      <body>
          <h2>OpenWrap Client Side Video -- video.js + IMA</h2>
      
          <p> This example shows how to implement OpenWrap client-side Video when not using GPT or when
              constructing the OpenWrap Ad Unit array manually</p>
      
          <div class="example-video-container">
              <video id="content_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
                  <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                  </source>
              </video>
          </div>
      
      
          <!-- Load dependent scripts -->
          <script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
          <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
          <script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
          <script src="//googleads.github.io/videojs-ima/dist/videojs.ima.js"></script>
      
          <script>
              function invokeVideoPlayer(url) {
      
                  var vjsOptions = {
                      autoplay: true,
                      muted: true,
                      debug: true
                  }
                  var player = videojs('content_video', vjsOptions);
      
                  var options = {
                      id: 'content_video',
                      adTagUrl: url
                  };
      
                  player.muted(true);
                  player.ima(options);
              }
          </script>
      
          <script>
              function ow_bids() {
                  if (typeof PWT.requestBids === 'function') {
                      console.log("OpenWrap bidding starting");
                      var ow_slots = [{
                          code: "video-1", // mandatory
                          divId: "content_video", // mandatory
                          adUnitId: "/40619304/OW_Video", // mandatory: can be any string, GAM ad unit id is often used
                          adUnitIndex: "0", // mandatory
                          mediaTypes: { // mandatory
                              video: { // mandatory
                                  "mimes": ["video/mp4"], // mandatory
                                  "playerSize": [640, 480], // mandatory when using OpenWrap versions with Prebid 4.x and later
                                  "w": 640, // Only needed for OpenWrap versions with Prebid 3.x
                                  "h": 480 // Only needed for OpenWrap versions with Prebid 3.x
                              }
                          },
                          sizes: [
                              [640, 480]
                          ] // mandatory
                      }];
      
                      var start_time = new Date().getTime();
                      PWT.requestBids(
                          ow_slots,
                          function(adUnitsArray) {
                              var end_time = new Date().getTime();
                              var diff = end_time - start_time;
                              console.log("OpenWrap Time taken: " + diff.toString());
                              var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {});
                              invokeVideoPlayer(videoUrl);
                          }
                      );
                  } else {
                      setTimeout(ow_bids, 10);
                  }
              }
      
              ow_bids();
          </script>
      </body>
      </html>
      
      
      
    3. Multiple video slots HTML

      Multiple video slot HTML
      <!DOCTYPE HTML>
       
      <html lang="en-us">
       
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>NON SRA</title>
          <!-- videojs -->
          <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
          <!-- videojs-vast-vpaid -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css"
              rel="stylesheet">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
       
          <!-- Loading Asynchronously -->
          <script type="text/javascript">
              Array.$constructor = function () {
                  for (i = 0; i < this.length; i++) {
                      this[i] = this[i].toUpperCase();
                  }
              };
          </script>
          <script type="text/javascript">
              (function () {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2133';
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
       
          <script type='text/javascript'>
              var googletag = googletag || {};
              googletag.cmd = googletag.cmd || [];
              var PWT = {}; //Initialize Namespace
              PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                  var gads = document.createElement('script');
                  gads.type = "text/javascript";
                  gads.async = true;
                  gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(gads, node);
              };
          </script>
       
          <script type="text/javascript">
              googletag.cmd.push(function () {
       
                  var s2 = googletag.defineSlot('/43743431/QAVideo', [
                      [640, 480]
                  ], 'Div2').addService(googletag.pubads());
                  s2.setTargeting('a', [1]);
                  s2.setTargeting('b', [2]);
                  s2.setTargeting('c', 3);
                  s2.setTargeting('d', ['a', 'b', 'c']);
       
                  var s1 = googletag.defineSlot('/43743431/QAVideo', [
                      [640, 480]
                  ], 'Div1').addService(googletag.pubads());
                  s1.setTargeting('aa', [11]);
                  s1.setTargeting('bb', [22]);
                  s1.setTargeting('cc', 33);
                  s1.setTargeting('dd', ['aa', 'bb', 'cc']);
       
       
                  // common targetings
                  googletag.pubads().setTargeting('v', 'classifieds');
                  googletag.pubads().setTargeting('cpage', 'browseads');
                  googletag.pubads().setTargeting('article-id', '65207');
                  googletag.pubads().setTargeting('automation', '1');
       
                  googletag.enableServices();
       
                  if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                      PWT.requestBids(
                          PWT.generateConfForGPT(googletag.pubads().getSlots()),
                          function (adUnitsArray) {
                              console.log("AdUnitsArray", adUnitsArray);
                              // PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                              // googletag.display('Div1');
                              // googletag.display('Div2');
       
                              var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                  section: 'blog',
                                  anotherKey: 'anotherValue'
                              });
                              invokeVideoPlayer(videoUrl);
                              var videoUrl1 = window.PWT.generateDFPURL(adUnitsArray[1], {
                                  section: 'blog',
                                  anotherKey: 'anotherValue'
                              });
                              invokeVideoPlayer1(videoUrl1);
                              PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
       
                          }
                      );
                  }
       
       
              });
          </script>
      </head>
       
      <!-- <body style='background-color:whitesmoke;'>
       
          <h2 style='text-align:center;'>
              NON SRA
          </h2>
       
          <br><br>
          Adslot : /43743431/DMDemo
          <br>
          <div id='Div1'>
          </div>
       
          <br><br>
          Adslot : /43743431/DMDemo1
          <br>
          <div id='Div2'>
          </div>
      </body> -->
       
      <body>
       
          <h2>OpenWrap - Prebid Video -- video.js</h2>
       
          <div class="example-video-container" id='Div2'>
       
              <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
          <br><br>
          <div class="example-video-container" id='Div1'>
       
              <video id="vid2" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
       
       
       
          <script>
              var page_load_time;
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loading!");
       
              var vid1 = videojs('vid1');
              var vid2 = videojs('vid2');
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loaded!");
       
              function invokeVideoPlayer(url) {
       
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
       
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
       
                  videojs("vid1").ready(function () {
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
       
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 25000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
       
                      player.muted(true);
                      player.play();
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
       
                  });
              }
       
              function invokeVideoPlayer1(url) {
       
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
       
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
       
                  videojs("vid2").ready(function () {
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
       
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 25000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
       
                      player.muted(true);
                      player.play();
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
       
                  });
              }
          </script>
      </body>
       
      </html>
    4. MultiSlots with banner and video inventory

      Multiple slot for banner and video HTML
      <!DOCTYPE HTML>
      
      <html lang="en-us">
      
      <head>
      	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
      	<title>NON SRA</title>
              <!-- videojs -->
              <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
              <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
              <!-- videojs-vast-vpaid -->
              <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
              <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
      
      	<!-- Loading Asynchronously -->
      	<script type="text/javascript">
      		Array.$constructor = function () {
      			for (i = 0; i < this.length; i++) {
      				this[i] = this[i].toUpperCase();
      			}
      		};
      	</script>
      	<script type="text/javascript">
      		(function () {
      			var purl = window.location.href;
      			var url = '//ads.pubmatic.com/AdServer/js/pwt/5890';
      			var profileId = '';
      			var profileVersionId = '';
      			if (purl.indexOf('profileid=') > 0) {
      				var regexp = /profileid=(.*?)(&|$)/g;
      				var matches = regexp.exec(purl);
      				if (matches.length >= 2 && matches[1].length > 0) {
      					profileId = '/' + matches[1];
      				}
      			}
      			if (purl.indexOf('pwtv=') > 0) {
      				var regexp = /pwtv=(.*?)(&|$)/g;
      				var matches = regexp.exec(purl);
      				if (matches.length >= 2 && matches[1].length > 0) {
      					profileVersionId = '/' + matches[1];
      				}
      			}
      			var wtads = document.createElement('script');
      			wtads.async = true;
      			wtads.type = 'text/javascript';
      			wtads.src = url+profileId+profileVersionId+'/pwt.js';
      			//wtads.src = "https://test.com/Libs/OW/Video/owt.js";
      			// wtads.src = "http://test.com/Libs/OW/Video/owt_working.js";
      			var node = document.getElementsByTagName('script')[0];
      			node.parentNode.insertBefore(wtads, node);
      		})();
      	</script>
      
      	<script type='text/javascript'>
      		var googletag = googletag || {};
      		googletag.cmd = googletag.cmd || [];
      		(function () {
      			setTimeout(function () {
      				var gads = document.createElement('script');
      				gads.async = true;
      				gads.type = 'text/javascript';
      				var useSSL = 'https:' == document.location.protocol;
      				gads.src = (useSSL ? 'https:' : 'http:') +
      					'//www.googletagservices.com/tag/js/gpt.js';
      				var node = document.getElementsByTagName('script')[0];
      				node.parentNode.insertBefore(gads, node);
      			}, 250); // Adding 250ms delay to gpt.js for PubMatic script to load
      		})();
      	</script>
      
      	<script type="text/javascript">
      		googletag.cmd.push(function () {
      			
      			var s2 = googletag.defineSlot('/43743431/QAVideo', [
      				[640, 480]
      			], 'Div2').addService(googletag.pubads());
      			s2.setTargeting('a', [1]);
      			s2.setTargeting('b', [2]);
      			s2.setTargeting('c', 3);
      			s2.setTargeting('d', ['a', 'b', 'c']);
      			// var s2 = googletag.defineSlot('/43743431/DMDemo1', [
      			// 	[728, 90]
      			// ], 'Div2').addService(googletag.pubads());
      			// s2.setTargeting('aa', [11]);
      			// s2.setTargeting('bb', [22]);
      			// s2.setTargeting('dd', ['aa', 'bb', 'cc']);
      
      			var s1=googletag.defineSlot('/43743431/OpenWrapBothNativeBanner1', [['fluid'],[728, 90],[300,250],[160,600]], 'Div1').addService(googletag.pubads());
      			s1.setTargeting('a', [1]);
      			s1.setTargeting('b', [2]);
      			s1.setTargeting('c', 3);
      			s1.setTargeting('d', ['a', 'b', 'c']);		
      
      							
      			
      			
      
      			var s3=googletag.defineSlot('/43743431/DMDemo2', [[160, 600],[728,90],[300, 250]], 'Div3').addService(googletag.pubads());
      			s3.setTargeting('aaa', [111]);
      			s3.setTargeting('bbb', [222]);
      			s3.setTargeting('ddd', ['aaa', 'bbb', 'ccc']);		
      
      
      			// common targetings
      			googletag.pubads().setTargeting('v', 'classifieds');
      			googletag.pubads().setTargeting('cpage', 'browseads');
      			googletag.pubads().setTargeting('article-id', '65207');
      			googletag.pubads().setTargeting('automation', '1');
      
      			googletag.enableServices();
      
      			if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
      				PWT.requestBids(
      					PWT.generateConfForGPT(googletag.pubads().getSlots()),
      					function (adUnitsArray) {
      						console.log("AdUnitsArray", adUnitsArray);
      						// PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
      						// googletag.display('Div1');
      						// googletag.display('Div2');
      
      					    var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0],{
                                              section: 'blog',
                                              anotherKey: 'anotherValue'
                                          });
                                  invokeVideoPlayer(videoUrl);
      							PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
      							googletag.display('Div1');
      							googletag.display('Div3');
      					}
      				);
      			}
      
      
      		});
      	</script>
      </head>
      
      <!-- <body style='background-color:whitesmoke;'>
      
      	<h2 style='text-align:center;'>
      		NON SRA
      	</h2>
      
      	<br><br>
      	Adslot : /43743431/DMDemo
      	<br>
      	<div id='Div1'>
      	</div>
      
      	<br><br>
      	Adslot : /43743431/DMDemo1
      	<br>
      	<div id='Div2'>
      	</div>
      </body> -->
      
      <body>
      
      	<h2>OpenWrap - Prebid Video -- video.js</h2>
      
      	<div class="example-video-container" id='Div2'>
      
      		<video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'>
      			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
      			<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
      			<source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
      		</video>
      	</div>
      	
      	<br><br>
      	Adslot : /43743431/DMDemo
      	<br>
      	<div id='Div1'>
      	</div>
      
      	<br><br>
      	Adslot : /43743431/DMDemo1
      	<br>
      	<div id='Div3'>
      	</div>
      
      	<script>
      		var page_load_time;
      
      		page_load_time = new Date().getTime() - performance.timing.navigationStart;
      		console.log(page_load_time + "ms -- Player loading!");
      
      		var vid1 = videojs('vid1');
      
      		page_load_time = new Date().getTime() - performance.timing.navigationStart;
      		console.log(page_load_time + "ms -- Player loaded!");
      
      		function invokeVideoPlayer(url) {
      
      			page_load_time = new Date().getTime() - performance.timing.navigationStart;
      			console.log(page_load_time + "ms -- Prebid VAST url = " + url);
      
      			/* Access the player instance by calling `videojs()` and passing
      			   in the player's ID. Add a `ready` listener to make sure the
      			   player is ready before interacting with it. */
      
      			videojs("vid1").ready(function() {
      
      				page_load_time = new Date().getTime() - performance.timing.navigationStart;
      				console.log(page_load_time + "ms -- Player is ready!");
      
      				/* PASS SETTINGS TO VAST PLUGIN
      
      				   Pass in a JSON object to the player's `vastClient` (defined
      				   by the VAST/VPAID plugin we're using). The requires an
      				   `adTagUrl`, which will be the URL returned by Prebid. You
      				   can view all the options available for the `vastClient`
      				   here:
      
      				   https://github.com/MailOnline/videojs-vast-vpaid#options */
      
      				var player = this;
      				var vastAd = player.vastClient({
      					adTagUrl: url,
      					playAdAlways: true,
      					verbosity: 4,adCancelTimeout: 25000,
      					vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
      					autoplay: true
      				});
      
      				page_load_time = new Date().getTime() - performance.timing.navigationStart;
      				console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
      
      				player.muted(true);
      				player.play();
      
      				page_load_time = new Date().getTime() - performance.timing.navigationStart;
      				console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
      
      			});
      		}
      
      	</script>
      </body>
      </html>
    5. Multi-format (banner and video) single slot

      Multi-format banner & video HTML
      <!DOCTYPE HTML>
       
      <html lang="en-us">
       
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>NON SRA</title>
          <!-- videojs -->
          <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
          <!-- videojs-vast-vpaid -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css"
              rel="stylesheet">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>
       
          <!-- Loading Asynchronously -->
          <script type="text/javascript">
              Array.$constructor = function () {
                  for (i = 0; i < this.length; i++) {
                      this[i] = this[i].toUpperCase();
                  }
              };
          </script>
          <script type="text/javascript">
              (function () {
                  var purl = window.location.href;
                  var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2141';
                  var profileVersionId = '';
                  if (purl.indexOf('pwtv=') > 0) {
                      var regexp = /pwtv=(.*?)(&|$)/g;
                      var matches = regexp.exec(purl);
                      if (matches.length >= 2 && matches[1].length > 0) {
                          profileVersionId = '/' + matches[1];
                      }
                  }
                  var wtads = document.createElement('script');
                  wtads.async = true;
                  wtads.type = 'text/javascript';
                  wtads.src = url + profileVersionId + '/pwt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(wtads, node);
              })();
          </script>
       
          <script type='text/javascript'>
              var googletag = googletag || {};
              googletag.cmd = googletag.cmd || [];
              var PWT = {}; //Initialize Namespace
              PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                  var gads = document.createElement('script');
                  gads.type = "text/javascript";
                  gads.async = true;
                  gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                  var node = document.getElementsByTagName('script')[0];
                  node.parentNode.insertBefore(gads, node);
              };
          </script>
       
          <script type="text/javascript">
              googletag.cmd.push(function () {
       
       
                  var s1 = googletag.defineSlot('/43743431/OpenWrapBothNativeBanner1', [
                      ['fluid'],
                      [728, 90],
                      [300, 250],
                      [160, 600],
                      [640, 480]
                  ], 'Div1').addService(googletag.pubads());
                  s1.setTargeting('a', [1]);
                  s1.setTargeting('b', [2]);
                  s1.setTargeting('c', 3);
                  s1.setTargeting('d', ['a', 'b', 'c']);
       
       
       
                  // common targetings
                  googletag.pubads().setTargeting('v', 'classifieds');
                  googletag.pubads().setTargeting('cpage', 'browseads');
                  googletag.pubads().setTargeting('article-id', '65207');
                  googletag.pubads().setTargeting('automation', '1');
       
                  googletag.enableServices();
       
                  if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                      PWT.requestBids(
                          PWT.generateConfForGPT(googletag.pubads().getSlots()),
                          function (adUnitsArray) {
                              console.log("AdUnitsArray", adUnitsArray);
                              if (adUnitsArray[0].bidData.kvp.pwtplt == "video") {
                                  var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                      section: 'blog',
                                      anotherKey: 'anotherValue'
                                  });
                                  invokeVideoPlayer(videoUrl);
       
                              } else {
                                  PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                                  googletag.display('Div1');
                              }
                          }
                      );
                  }
       
       
              });
          </script>
      </head>
       
      <body>
       
          <h2>OpenWrap - Prebid Video -- video.js</h2>
       
          <div class="example-video-container" id="Div1">
       
              <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640'
                  height='480'>
                  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' />
              </video>
          </div>
       
       
          <script>
              var page_load_time;
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loading!");
       
              var vid1 = videojs('vid1');
       
              page_load_time = new Date().getTime() - performance.timing.navigationStart;
              console.log(page_load_time + "ms -- Player loaded!");
       
              function invokeVideoPlayer(url) {
       
                  page_load_time = new Date().getTime() - performance.timing.navigationStart;
                  console.log(page_load_time + "ms -- Prebid VAST url = " + url);
       
                  /* Access the player instance by calling `videojs()` and passing
                     in the player's ID. Add a `ready` listener to make sure the
                     player is ready before interacting with it. */
       
                  videojs("vid1").ready(function () {
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Player is ready!");
       
                      /* PASS SETTINGS TO VAST PLUGIN
       
                         Pass in a JSON object to the player's `vastClient` (defined
                         by the VAST/VPAID plugin we're using). The requires an
                         `adTagUrl`, which will be the URL returned by Prebid. You
                         can view all the options available for the `vastClient`
                         here:
       
                         https://github.com/MailOnline/videojs-vast-vpaid#options */
       
                      var player = this;
                      var vastAd = player.vastClient({
                          adTagUrl: url,
                          playAdAlways: true,
                          verbosity: 4,
                          adCancelTimeout: 25000,
                          vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                          autoplay: true
                      });
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- Prebid VAST tag inserted!");
       
                      player.muted(true);
                      player.play();
       
                      page_load_time = new Date().getTime() - performance.timing.navigationStart;
                      console.log(page_load_time + "ms -- invokeVideoPlayer complete!");
       
                  });
              }
          </script>
      </body>
       
      </html>
      

Important considerations

  • AdUnit config slotnames are case sensitive.
  • ConfigPattern is optional and take only two values: _AU_ & _DIV_ (default is _AU_).
  • Default config is optional and key name is, default.
  • OpenWrap JavaScript currently supports only client-side partners for video inventory. In the case of hybrid profiles, PubMatic server does not  accept calls for video inventory.
  • Currently, OpenWrap accepts only the Custom AdServer Option.
  • PubMatic does not send video impressions when AdServer is GAM.
  • All partners require a 0x0 mapping file entry to support video.
  • Disregard the console warning, "fun-hooks: referenced 'registerAdserver' but it was never created"—it will be removed in a future release.

New convenience method on OpenWrap JavaScript API

Along with the other methods mentioned in the OpenWrap JavaScript API documentation, there is now the additional method, PWT.generateDFPURL, described below.

Convenience MethodDescriptionParameterResponse
PWT.generateDFPURLGenerates the DFP (GAM) URL processed by the video player to display ads. Works only for Google Ad Manager/GPT.The GPT ad slot video object returned by, PWT.requestBidsThe DFP URL to pass to the video player.

⇧ Top

Do you have feedback on this document? Let us know: email us.

Table of Contents