Merge pull request #33 from jwplayer/AD-1648-rebase

video.js support
jwplayer · Jun 30, 2022 · dc0026e · dc0026e
2 parents acb6db1 + c484bd8
commit dc0026e
Show file tree

Hide file tree

Showing 8 changed files with 986 additions and 8 deletions.
diff --git a/integrationExamples/videoModule/index.html → ...es/videoModule/jwplayerAdapter/index.html b/integrationExamples/videoModule/index.html → ...es/videoModule/jwplayerAdapter/index.html
@@ -1,11 +1,11 @@
-<!--
+-<!--
 
 -->
 
 <html>
 
 <head>
-    <script async src="../../build/dev/prebid.js"></script>
+    <script async src="../../../build/dev/prebid.js"></script>
     <script src="https://cdn.jwplayer.com/libraries/l5MchIxB.js"></script>
 
     <script>
@@ -57,13 +57,13 @@
           }
         }]
       }];
-
-
+
       pbjs.que.push(function () {
         pbjs.setConfig({
           video: {
             providers: [{
               divId: 'vid-div-1',
+              // vendorCode for jwplayer
               vendorCode: 1,
               playerConfig: {
                 licenseKey: 'huJTAG1dRVvvE1bT4Ng2DEnZ2ogCSgwTLwQBp8Cp9BDyAgkKC7uLuw==',
@@ -143,4 +143,3 @@ <h5>Div-2</h5>
 </body>
 
 </html>
-
diff --git a/integrationExamples/videoModule/videojsAdapter/index.html b/integrationExamples/videoModule/videojsAdapter/index.html
@@ -0,0 +1,119 @@
+<html>
+
+<head>
+  <script async src="../../../build/dev/prebid.js"></script>
+  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs-contrib-ads.css"
+    integrity="sha512-0gIqgiX1dWTChdWUl8XGIBDFvLo7aTvmd6FAhJjzWx5bzYsCJTiPJLKqLF3q31IN4Kfrc0NbTO+EthoT6O0olQ=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/1.11.0/videojs.ima.css"
+    integrity="sha512-vvsEsf+dZDp6wbommO1Jbb2bpFhVQjw6pIzfE5fUY5Fgkmsgn/16sQWegqrd236T69kK5F1SbGZ+yK46a9il5A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <!-- Setup ad units -->
+  <script>
+    var adUnits = [{
+      code: 'div-gpt-ad-51545-0',
+      sizes: [[600, 500]],
+      mediaTypes: {
+        video: {
+          sizes: [[600, 500]]
+        }
+      },
+      video: {
+        divId: 'vid-div-1',
+        adServer: {
+          vendorCode: "gam",
+          params: {
+            iu: '/19968336/prebid_cache_video_adunit',
+            cust_params: {
+              section: 'blog',
+              anotherKey: 'anotherValue'
+            },
+            output: 'vast'
+          }
+        },
+      },
+
+      bids: [{
+        bidder: 'ix',
+        params: {
+          siteId: '300',
+          size: [600, 500]
+        }
+      }]
+    }];
+
+    var pbjs = pbjs || {};
+    pbjs.que = pbjs.que || [];
+
+    pbjs.que.push(function () {
+      pbjs.onEvent('adImpression', event => {
+        console.log('adImpression: ', event);
+      });
+      pbjs.setConfig({
+        video: {
+          providers: [{
+            divId: 'vid-div-1',
+            // vendorCode for videojs
+            vendorCode: 2,
+            playerConfig: {
+              params: {
+                vendorConfig: {
+                  mediaid: 'd9J2zcaA',
+                  advertising: {
+                    adscheduleid: "00000000",
+                    client: 'vast',
+                    offset: "10",
+                    tag: [
+                      'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&' +
+                      'iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&' +
+                      'impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&' +
+                      'cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&' +
+                      'vid=short_onecue&correlator=',
+                      "http://playertest.longtailvideo.com/mid.xml"
+                    ],
+                  }
+                }
+              }
+            }
+          },]
+        }
+      });
+      pbjs.addAdUnits(adUnits);
+      pbjs.requestBids();
+    });
+  </script>
+</head>
+
+<body>
+  <h2>VideoJS Adapter Test</h2>
+
+  <h5>Div-1 existing Player</h5>
+
+  <video id='vid-div-1' class="video-js vjs-big-play-centered"
+    data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
+    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+  </video>
+
+  <h5>Div-2 existing player without automatic setup</h5>
+  <video-js id='vid-div-2' data-setup='{"controls": true}'>
+    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+  </video-js>
+
+  <h5>Div-3 controlled Player</h5>
+  <div id='vid-div-3'></div>
+
+
+  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
+  <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs-contrib-ads.js"
+    integrity="sha512-XjyyAijQGlXZET35toG8igvVs8HvfVgKXGnbfAs2EpZ0o8vjJoIrxL9RBBQbQjzAODIe0jvWelFfZOA3Z/vdWg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/1.11.0/videojs.ima.js"
+    integrity="sha512-9ocW9fl8CKJhZp4cmDpLDGPuTQ93gvw1iIS6daMYc5Y0Xh1all8iwdoI+iNmZpiydpdDGyKMTriXDX0wfs2OEg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+</body>
+
+</html>
diff --git a/libraries/video/constants/ortb.js b/libraries/video/constants/ortb.js
@@ -97,6 +97,30 @@ export const PLACEMENT = {
   INTERSTITIAL_SLIDER_FLOATING: 5
 };
 
+/**
+ * ORTB 2.5 section 5.4 - Ad Position
+ * @enum OrtbVideoParams.pos
+ */
+export const AD_POSITION = {
+  UNKNOWN: 0,
+  ABOVE_THE_FOLD: 1,
+  BELOW_THE_FOLD: 3,
+  HEADER: 4,
+  FOOTER: 5,
+  SIDEBAR: 6,
+  FULL_SCREEN: 7
+}
+
+/**
+ * ORTB 2.5 section 5.11 - Playback Cessation Modes
+ * @enum OrtbVideoParams.playbackend
+ */
+export const PLAYBACK_END = {
+  VIDEO_COMPLETION: 1,
+  VIEWPORT_LEAVE: 2,
+  FLOATING: 3
+}
+
 /**
  * ORTB 2.5 section 5.10 - Playback Methods
  * @enum OrtbVideoParams.playbackmethod

diff --git a/modules/.submodules.json b/modules/.submodules.json
@@ -86,7 +86,8 @@
     "video": {
       "files": [ "./index.js" ],
       "dependants": [
-        "jwplayerVideoProvider"
+        "jwplayerVideoProvider",
+        "videojsVideoProvider"
       ]
     }
   }

diff --git a/modules/jwplayerVideoProvider.js b/modules/jwplayerVideoProvider.js
@@ -1,5 +1,5 @@
 import {
-  PROTOCOLS, API_FRAMEWORKS, VIDEO_MIME_TYPE, PLAYBACK_METHODS, PLACEMENT, VPAID_MIME_TYPE
+  PROTOCOLS, API_FRAMEWORKS, VIDEO_MIME_TYPE, PLAYBACK_METHODS, PLACEMENT, VPAID_MIME_TYPE, AD_POSITION
 } from '../libraries/video/constants/ortb.js';
 import {
   SETUP_COMPLETE, SETUP_FAILED, DESTROYED, AD_REQUEST, AD_BREAK_START, AD_LOADED, AD_STARTED, AD_IMPRESSION, AD_PLAY,
@@ -120,7 +120,7 @@ export function JWPlayerProvider(config, jwplayer_, adState_, timeState_, callba
       // only specify ad position when in Fullscreen since computational cost is low
       // ad position options are listed in oRTB 2.5 section 5.4
       // https://www.iab.com/wp-content/uploads/2016/03/OpenRTB-API-Specification-Version-2-5-FINAL.pdf
-      video.pos = 7; // TODO make constant in oRTB
+      video.pos = AD_POSITION.FULL_SCREEN; // TODO make constant in oRTB
     }
 
     const item = player.getPlaylistItem() || {}; // TODO does player call need optimization ?