✨ ✅ 🐛 Add new data attributes to amp-jwplayer (ampproject#35163)

* Add JW Player to documentation that applies

* Revert "Add JW Player to documentation that applies"

This reverts commit 5aeba5a.

* 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]>

* Remove bad import

* Clean up consentgdpr

* Add comment about appending querystring

* Clean up from rebase

* Remove trailing whitespaces

* Remove controls attribute

* 📖  [JW8-11873] Update JW Player AMP Docs (#61)


    Update our amp-jwplayer docs with the new attributes
    Add amp-jwplayer in the docs where it applies

* cleanup rebase

* lint fixes

Co-authored-by: Zack Haigh <[email protected]>
Co-authored-by: Daniel Lee <[email protected]>

docs/spec/amp-video-interface.md

@@ -75,7 +75,7 @@ For an example, visit [AMP By Example](https://amp.dev/documentation/examples/co
 
 attribute: **`dock`**
 
-This attribute is currently only supported for `amp-brightcove`, `amp-dailymotion`, `amp-delight-player`, `amp-ima-video`, `amp-video`, `amp-video-iframe` and `amp-youtube`.
+This attribute is currently only supported for `amp-brightcove`, `amp-dailymotion`, `amp-delight-player`, `amp-ima-video`, `amp-jwplayer`, `amp-video`, `amp-video-iframe` and `amp-youtube`.
 
 If this attribute is present and the video is playing manually, the video will
 be "minimized" and fixed to a corner when the user scrolls out of the video

examples/jwplayer.amp.html

@@ -75,6 +75,116 @@ <h3>Non-Responsive, with an IMA Ad</h3>
     >
     </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>
+
+    <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>
+
     <h3>External Controls</h3>
     <amp-jwplayer
       id="myVideo"
@@ -84,15 +194,24 @@ <h3>External Controls</h3>
       height="270"
     >
     </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 />
 
-    <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>
-
-    <div style="height: 100vh"></div>
+    <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>
   </body>
 </html>