🐛 amp-ima-video: Allow other kinds of track than just subtitle an…

…d also support `crossorigin` (ampproject#21591) * amp-ima-video: Allow track and crossorigin * Update validator-amp-ima-video.protoascii * review changes * fix test * remove A4A, actions from track rule * Update imaVideo.js * review comments * Update imaVideo.js * fix types
samouri · Apr 2, 2019 · 5dc9d5b · 5dc9d5b
1 parent c4ef359
commit 5dc9d5b
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 5 deletions.
diff --git a/ads/google/imaVideo.js b/ads/google/imaVideo.js
@@ -425,6 +425,9 @@ export function imaVideo(global, data) {
     'background-color': 'black',
   });
   videoPlayer.setAttribute('poster', data.poster);
+  if (data['crossorigin'] != null) {
+    videoPlayer.setAttribute('crossorigin', data['crossorigin']);
+  }
   videoPlayer.setAttribute('playsinline', true);
   videoPlayer.setAttribute(
       'controlsList', 'nodownload nofullscreen noremoteplayback');

diff --git a/examples/ima-video.amp.html b/examples/ima-video.amp.html
@@ -29,6 +29,7 @@
     </style>
 </head>
 <body>
+
     <h1>amp-ima-video</h1>
     <h3>Resources</h3>
     <ul>
@@ -108,7 +109,7 @@ <h2>Video4</h2>
         <amp-ima-video id="Video4"
             autoplay
             width="640" height="360" layout="responsive"
-            data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=" 
+            data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator="
             data-poster="/examples/img/ima-poster.png">
             <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
         </amp-ima-video>
@@ -119,5 +120,22 @@ <h3>Video4 Actions</h3>
     <button on="tap:Video4.mute">Mute</button>
     <button on="tap:Video4.unmute">Unmute</button>
     <button on="tap:Video4.fullscreen">Fullscreen</button>
+
+    <h2>Video5</h2>
+    <div class="player-wrapper">
+    <div class="description">
+        With Source and Track Captions
+    </div>
+    <amp-ima-video id="Video4"
+    width="640" height="360" layout="responsive"
+    data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator="
+    data-poster="/examples/img/ima-poster.png"
+    data-crossorigin>
+        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+        <track kind="captions" srclang="en" src="https://brightcove.hs.llnwd.net/v2/unsecured/media/5359769197001/201903/2015/5359769197001_581bc84b-c6d3-425e-9537-a1f27209782e.vtt?pubId=5359769197001&videoId=6013200383001">
+    </div>
+</amp-ima-video>
+
+
 </body>
 </html>
diff --git a/extensions/amp-ima-video/0.1/test/validator-amp-ima-video.html b/extensions/amp-ima-video/0.1/test/validator-amp-ima-video.html
@@ -34,5 +34,19 @@
       data-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=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
       data-poster="path/to/poster.png">
   </amp-ima-video>
+
+  <amp-ima-video width=640 height=360 layout="responsive" autoplay data-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=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
+    data-poster="path/to/poster.png">
+    <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mpeg" type="application/x-mpegURL">
+    <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4" type="video/mp4"> >
+    <track kind="captions" src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4.track">
+  </amp-ima-video>
+
+  <amp-ima-video width=640 height=360 layout="responsive" autoplay data-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=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
+    data-poster="path/to/poster.png">
+    <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mpeg" type="application/x-mpegURL">
+    <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4" type="video/mp4"> >
+    <track kind="subtitles" srclang="en" src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4.track">
+  </amp-ima-video>
 </body>
 </html>
diff --git a/extensions/amp-ima-video/0.1/test/validator-amp-ima-video.out b/extensions/amp-ima-video/0.1/test/validator-amp-ima-video.out
@@ -35,5 +35,19 @@ PASS
 |        data-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=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
 |        data-poster="path/to/poster.png">
 |    </amp-ima-video>
+|
+|    <amp-ima-video width=640 height=360 layout="responsive" autoplay data-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=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
+|      data-poster="path/to/poster.png">
+|      <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mpeg" type="application/x-mpegURL">
+|      <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4" type="video/mp4"> >
+|      <track kind="captions" src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4.track">
+|    </amp-ima-video>
+|
+|    <amp-ima-video width=640 height=360 layout="responsive" autoplay data-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=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
+|      data-poster="path/to/poster.png">
+|      <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mpeg" type="application/x-mpegURL">
+|      <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4" type="video/mp4"> >
+|      <track kind="subtitles" srclang="en" src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4.track">
+|    </amp-ima-video>
 |  </body>
-|  </html>
+|  </html>
diff --git a/extensions/amp-ima-video/amp-ima-video.md b/extensions/amp-ima-video/amp-ima-video.md
@@ -54,7 +54,7 @@ VAST-compliant ad response (for examples, see
 
 The component HTML accepts the following types of HTML nodes as children:
 * `source` tags for content video, used in the same way as the standard `video` tag.
-* `track` tags for subtitles, in the same way as the standard `video` tag.
+* `track` tags for subtitles, in the same way as the standard `video` tag. If the track is hosted on a different origin than the document, you must add the `data-crossorigin` attribute to the `<amp-ima-video>` tag.
 * a `script` tag of type `application/json` used to provide [ImaSdkSettings](https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.ImaSdkSettings). Provide the property-translation of the setters in the linked documentation (e.g. to call `setNumRedirects(4)`, provide `{"numRedirects": 4}`).
 
 ## Example
@@ -86,6 +86,10 @@ The component HTML accepts the following types of HTML nodes as children:
     <td width="40%"><strong>data-src</strong></td>
     <td>The URL of your video content. A relative URL or a URL that uses https protocol. This attribute is required if no <code>&lt;source&gt;</code> children are present.</td>
   </tr>
+  <tr>
+    <td width="40%"><strong>data-crossorigin</strong></td>
+    <td>Required if a <code>track</code> resource is hosted on a different origin than the document.</td>
+  </tr>
   <tr>
     <td width="40%"><strong>data-poster (optional)</strong></td>
     <td>An image for the frame to be displayed before video playback has started. By

diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii
@@ -2634,8 +2634,17 @@ tags: {
 }
 tags: {
   html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
+  tag_name: "TRACK"
+  spec_name: "amp-ima-video > track"
+  mandatory_parent: "AMP-IMA-VIDEO"
+  # <amp-bind>
+  attrs: { name: "[label]" }
+  attrs: { name: "[src]" }
+  attrs: { name: "[srclang]" }
+  attr_lists: "track-attrs-no-subtitles"
+}
+tags: {
+  html_format: AMP
   tag_name: "TRACK"
   spec_name: "amp-ima-video > track[kind=subtitles]"
   mandatory_parent: "AMP-IMA-VIDEO"