Extend AMP Params (#62)

* Add setup method * create separate postMessage method and add setup test * adding support for data-params and querystring * updating tests for data-params * re-adding unit test i accidentally removed * Pass custom config added through amp to player * Use correct import format * updated attribute names * adding code suggestions * Add test coverage and fix formatting * Move test config to above assertation * Update media id and player id for vast ad config * Add cust-params data attribute for ads * testing * Integrate with amp-consent and add custom macros * Lint fixes Co-authored-by: Daniel Lee <[email protected]>
jwplayer · Jul 27, 2021 · 6614894 · 6614894
1 parent 49b2a4f
commit 6614894
Show file tree

Hide file tree

Showing 3 changed files with 464 additions and 64 deletions.
diff --git a/examples/jwplayer.amp.html b/examples/jwplayer.amp.html
@@ -75,24 +75,147 @@ <h3>Non-Responsive, with an IMA Ad</h3>
     >
     </amp-jwplayer>
 
-    <h3>External Controls</h3>
-    <amp-jwplayer
-      id="myVideo"
-      data-media-id="CtaIzmFs"
-      data-player-id="BjcwyK37"
-      width="480"
-      height="270"
-    >
-    </amp-jwplayer>
+  <h3>Custom Skin</h3>
+  <amp-jwplayer
+    data-media-id="CtaIzmFs"
+    data-player-id="BjcwyK37"
+    width="640"
+    height="360"
+    data-config-skin-url="https://playertest.longtailvideo.com/skins/ethan.css"
+  >
+  </amp-jwplayer>
+
+  <h3>Custom Plugin</h3>
+  <amp-jwplayer
+    data-media-id="CtaIzmFs"
+    data-player-id="BjcwyK37"
+    width="640"
+    height="360"
+    data-config-plugin-url="https://playertest.longtailvideo.com/plugins/newsticker.js"
+  >
+  </amp-jwplayer>
+
+  <h3>Custom JSON Ad Config</h3>
+  <amp-jwplayer
+    data-media-id="NsdRZqng"
+    data-player-id="WmASC9FK"
+    layout="responsive"
+    width="16"
+    height="9"
+    data-config-json='{
+      "advertising": {
+        "client": "vast",
+        "schedule": [
+          {
+              "tag": "http://playertest.longtailvideo.com/pre.xml",
+              "offset": "pre"
+          },
+          {
+              "tag": "http://playertest.longtailvideo.com/mid.xml",
+              "offset": "5"
+          },
+          {
+              "tag": "http://playertest.longtailvideo.com/post.xml",
+              "offset": "post"
+          }
+        ]
+      }
+    }'
+  >
+  </amp-jwplayer>
+
+  <h3>Custom JSON Config</h3>
+  <amp-jwplayer
+    data-media-id="CtaIzmFs"
+    data-player-id="BjcwyK37"
+    layout="responsive"
+    width="16"
+    height="9"
+    data-config-json='{
+      "playbackRateControls": true,
+      "displaytitle": false,
+      "horizontalVolumeSlider": true
+    }'
+  >
+  </amp-jwplayer>
+
+  <h3>Custom IMA Ad Params</h3>
+  <amp-jwplayer
+    data-media-id="BZ6tc0gy"
+    data-player-id="4MCKXmfU"
+    width="640"
+    height="360"
+    data-ad-cust-params='{
+      "key1": "value1",
+      "keyTest": "value2"
+    }'
+  >
+  </amp-jwplayer>
+
+  <h3>Custom VAST Ad Params</h3>
+  <amp-jwplayer
+    data-media-id="NsdRZqng"
+    data-player-id="WmASC9FK"
+    width="480"
+    height="270"
+    data-ad-cust-params='{"key1": "value1","keyTest": "value2"}'
+  >
+  </amp-jwplayer>
 
-    <p>
-      <button on="tap:myVideo.play">Play</button>
-      <button on="tap:myVideo.pause">Pause</button>
-      <button on="tap:myVideo.mute">Mute</button>
-      <button on="tap:myVideo.unmute">Unmute</button>
-      <button on="tap:myVideo.fullscreen">FS</button>
-    </p>
+  <h3>Custom VAST Ad Macros</h3>
+  <amp-jwplayer
+    data-media-id="CtaIzmFs"
+    data-player-id="BjcwyK37"
+    layout="responsive"
+    width="16"
+    height="9"
+    data-ad-macro-item-test='val'
+    data-ad-macro-item-param-list='one,two,three'
+    data-config-json='{
+      "advertising": {
+        "client": "vast",
+        "schedule": [
+          {
+              "tag": "http://playertest.longtailvideo.com/pre.xml?domain=__domain__&test=__item-test__&param=__item-param-list__",
+              "offset": "pre"
+          }
+        ]
+      }
+    }'
+  >
+  </amp-jwplayer>
 
-    <div style="height: 100vh"></div>
-  </body>
+  <h3>External Controls</h3>
+  <amp-jwplayer
+    id="myVideo"
+    data-media-id="CtaIzmFs"
+    data-player-id="BjcwyK37"
+    width="480" 
+    height="270"
+    controls=""
+  >
+  </amp-jwplayer>
+  <br />
+  <button on="tap:myVideo.play">Play</button>
+  <button on="tap:myVideo.pause">Pause</button>
+  <button on="tap:myVideo.mute">Mute</button>
+  <button on="tap:myVideo.unmute">Unmute</button>
+  <button on="tap:myVideo.fullscreen">FS</button>
+  <br />
+
+  <h3>Query String and Data Params</h3>
+  <amp-jwplayer
+    data-media-id="BZ6tc0gy"
+    data-player-id="uoIbMPm3"
+    data-player-querystring='name1=abc&name2=xyz&name3=123'
+    data-player-param-language="de"
+    data-player-param-custom-ad-data="key:value;key2:value2"
+    width="480" 
+    height="270"
+  >
+</amp-jwplayer>
+  <br />
+  <br />
+  <br />
+</body>
 </html>