amp-ima-video: Added support for track child elements. (#9827)

ampproject · Jun 14, 2017 · 3d89237 · 3d89237
1 parent 85c0f7c
commit 3d89237
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/ads/google/imaVideo.js b/ads/google/imaVideo.js
@@ -319,21 +319,18 @@ export function imaVideo(global, data) {
   setStyle(videoPlayer, 'background-color', 'black');
   videoPlayer.setAttribute('poster', data.poster);
   videoPlayer.setAttribute('playsinline', true);
-  // Set video player source, first based on data-src then on source child
-  // elements.
   if (data.src) {
     const sourceElement = document.createElement('source');
     sourceElement.setAttribute('src', data.src);
     videoPlayer.appendChild(sourceElement);
   }
-  if (data.sources) {
-    const sources = JSON.parse(data.sources);
-    sources.forEach(source => {
-      videoPlayer.appendChild(htmlToElement(source));
+  if (data.childElements) {
+    const children = JSON.parse(data.childElements);
+    children.forEach(child => {
+      videoPlayer.appendChild(htmlToElement(child));
     });
   }
 
-
   contentDiv.appendChild(videoPlayer);
   wrapperDiv.appendChild(contentDiv);
   wrapperDiv.appendChild(adContainerDiv);

diff --git a/extensions/amp-ima-video/0.1/amp-ima-video.js b/extensions/amp-ima-video/0.1/amp-ima-video.js
@@ -60,6 +60,9 @@ class AmpImaVideo extends AMP.BaseElement {
 
     /** @private {?String} */
     this.preconnectSource_ = null;
+
+    /** @private {?String} */
+    this.preconnectTrack_ = null;
   }
 
   /** @override */
@@ -71,17 +74,23 @@ class AmpImaVideo extends AMP.BaseElement {
         'The data-tag attribute is required for <amp-video-ima> and must be ' +
             'https');
 
-    // Set data-sources attribute based on source child elements.
     const sourceElements = this.element.getElementsByTagName('source');
-    if (sourceElements.length > 0) {
-      const sources = [];
-      toArray(sourceElements).forEach(source => {
-        if (!this.preconnectSource_) {
-          this.preconnectSource_ = source.src;
+    const trackElements = this.element.getElementsByTagName('track');
+    const childElements =
+        toArray(sourceElements).concat(toArray(trackElements));
+    if (childElements.length > 0) {
+      const children = [];
+      childElements.forEach(child => {
+        // Save the first source and first track to preconnect.
+        if (child.tagName == 'SOURCE' && !this.preconnectSource_) {
+          this.preconnectSource_ = child.src;
+        } else if (child.tagName == 'TRACK' && !this.preconnectTrack_) {
+          this.preconnectTrack_ = child.src;
         }
-        sources.push(source./*OK*/outerHTML);
+        children.push(child./*OK*/outerHTML);
       });
-      this.element.setAttribute('data-sources', JSON.stringify(sources));
+      this.element.setAttribute(
+          'data-child-elements', JSON.stringify(children));
     }
   }
 
@@ -96,6 +105,9 @@ class AmpImaVideo extends AMP.BaseElement {
     if (this.preconnectSource_) {
       this.preconnect.url(this.preconnectSource_);
     }
+    if (this.preconnectTrack_) {
+      this.preconnect.url(this.preconnectTrack_);
+    }
     this.preconnect.url(this.element.getAttribute('data-tag'));
     preloadBootstrap(this.win, this.preconnect);
   }

diff --git a/extensions/amp-ima-video/amp-ima-video.md b/extensions/amp-ima-video/amp-ima-video.md
@@ -32,7 +32,7 @@ limitations under the License.
     <td width="40%"><strong>Required Script</strong></td>
     <td><code>&lt;script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js">&lt;/script></code></td>
   </tr>
-  <tr
+  <tr>
     <td class="col-fourty"><strong><a href="https://www.ampproject.org/docs/guides/responsive/control_layout.html">Supported Layouts</a></strong></td>
     <td>fixed, responsive</td>
   </tr>
@@ -48,19 +48,23 @@ You can use the `amp-ima-video` component to embed an
 <a href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/">IMA
 SDK</a> enabled video player.
 
-To embed a video, provide a source URL for your
-content video (`data-src`) and an ad tag (`data-tag`), which is a URL to a
+The `amp-ima-video` component HTML accepts up to two unique types of HTML nodes
+as children - `source` tags for content video, and `track` tags for subtitles.
+Both of these can be used in the same way as the standard `video` tag.
+
+The component requires an ad tag, provided in `data-tag`, which is a URL to a
 VAST-compliant ad response (for examples, see
 [IMA Sample Tags](https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags)).
 
-**Example: Embedding a video**
+## Example
 
 ```html
 <amp-ima-video
     width=640 height=360 layout="responsive"
-    data-src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"
-    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">
+    data-tag="ads.xml" data-poster="poster.png">
+  <source src="foo.mp4" type="video/mp4">
+  <source src="foo.webm" type="video/webm">
+  <track label="English subtitles" kind="subtitles" srclang="en" src="subtitles.vtt">
 </amp-ima-video>
 ```
 

diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii
@@ -1679,6 +1679,18 @@ tags: {
   attrs: { name: "[srclang]" }
   attr_lists: "track-attrs-subtitles"
 }
+tags: {
+  tag_name: "TRACK"
+  spec_name: "amp-ima-video > track[kind=subtitles]"
+  mandatory_parent: "AMP-IMA-VIDEO"
+  # <amp-bind>
+  attrs: { name: "[label]" }
+  attrs: { name: "[src]" }
+  attrs: { name: "[srclang]" }
+  attr_lists: "track-attrs-subtitles"
+  spec_url: "https://www.ampproject.org/docs/reference/components/amp-ima-video"
+}
+
 
 # 4.7.15 SVG
 # We allow some limited embedded SVG tags. We do not allow inline styles