diff --git a/ads/google/imaVideo.js b/ads/google/imaVideo.js index e29b42e50a25..c39af3ba7a90 100644 --- 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 index 9907ecc74b47..9b9d31123f1d 100644 --- 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 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 index b22bade42ee4..59d5773e08a7 100644 --- 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. Required Script <script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script> - Supported Layouts fixed, responsive @@ -48,19 +48,23 @@ You can use the `amp-ima-video` component to embed an IMA SDK 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 + data-tag="ads.xml" data-poster="poster.png"> + + + ``` diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii index acce31c54c47..2aba2b8da2d2 100644 --- 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" + # + 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