Prerender and preload remote video cache.

build-system/test-configs/forbidden-terms.js

@@ -431,6 +431,7 @@ const forbiddenTermsGlobal = {
     allowlist: [
       'build-system/externs/amp.extern.js',
       'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js',
+      'extensions/amp-video/0.1/video-cache.js',
       'src/utils/xhr-utils.js',
     ],
   },

extensions/amp-video/0.1/amp-video.js

@@ -129,11 +129,11 @@ export class AmpVideo extends AMP.BaseElement {
    * @nocollapse
    */
   static prerenderAllowed(element) {
-    // Only allow prerender if video sources are cached on CDN, or if video has
-    // a poster image.
+    // Only allow prerender if video sources are cached on CDN or remote video
+    // cache, or if video has a poster image.
 
-    // Poster is available.
-    if (element.getAttribute('poster')) {
+    // Poster is available, or cache is configured.
+    if (element.getAttribute('poster') || element.hasAttribute('cache')) {
       return true;
     }
 
@@ -529,6 +529,7 @@ export class AmpVideo extends AMP.BaseElement {
     // transcodes generated by the cache.
     // Origin sources will only be added when document becomes visible.
     sources.forEach((source) => {
+      // Cached by the AMP Cache (amp-video[amp-orig-src]).
       if (isCachedByCdn(source, this.element)) {
         source.remove();
         const qualities = Object.keys(AMP_VIDEO_QUALITY_BITRATES);
@@ -548,6 +549,13 @@ export class AmpVideo extends AMP.BaseElement {
           }
           this.video_.appendChild(currSource);
         });
+
+        return;
+      }
+
+      // Cached by the remote video caching (amp-video[cache=*]).
+      if (source.hasAttribute('i-amphtml-video-cached-source')) {
+        this.video_.appendChild(source);
       }
     });
 

extensions/amp-video/0.1/test/test-amp-video.js

@@ -71,7 +71,7 @@ describes.realWin(
       const impl = await v.getImpl(false);
 
       if (opt_noLayout) {
-        return;
+        return v;
       }
       if (opt_beforeLayoutCallback) {
         opt_beforeLayoutCallback(v, impl);
@@ -821,6 +821,87 @@ describes.realWin(
         expect(sources.length).to.equal(1);
         expect(sources[0].getAttribute('src')).to.equal(origSrc);
       });
+
+      describe('prerendering', () => {
+        let makeVisible;
+        let visibilityStubs;
+
+        beforeEach(() => {
+          visibilityStubs = {
+            getVisibilityState: env.sandbox.stub(
+              env.ampdoc,
+              'getVisibilityState'
+            ),
+            whenFirstVisible: env.sandbox.stub(env.ampdoc, 'whenFirstVisible'),
+          };
+          visibilityStubs.getVisibilityState.returns(VisibilityState.PRERENDER);
+          const visiblePromise = new Promise((resolve) => {
+            makeVisible = resolve;
+          });
+          visibilityStubs.whenFirstVisible.returns(visiblePromise);
+        });
+
+        it('should propagate cached sources in prerendering', async () => {
+          remoteSources.push({
+            url: 'https://example.com/cached-video.mp4',
+            type: 'video/mp4',
+          });
+          const source = doc.createElement('source');
+          source.setAttribute('src', 'https://example.com/video.mp4');
+          const v = await getVideo(
+            {
+              type: 'video/mp4',
+              cache: 'google',
+              layout: 'responsive',
+              height: '100px',
+              width: '100px',
+            },
+            [source],
+            null,
+            /* opt_noLayout */ true
+          );
+          v.layoutCallback();
+          const sources = v.querySelectorAll('video source');
+          // Only one source, and the cached one.
+          expect(sources.length).to.equal(1);
+          expect(sources[0].getAttribute('src')).to.equal(
+            'https://example.com/cached-video.mp4'
+          );
+        });
+
+        it('should have all sources when visible after prerendering', async () => {
+          remoteSources.push({
+            url: 'https://example.com/cached-video.mp4',
+            type: 'video/mp4',
+          });
+          const source = doc.createElement('source');
+          source.setAttribute('src', 'https://example.com/video.mp4');
+          const v = await getVideo(
+            {
+              type: 'video/mp4',
+              cache: 'google',
+              layout: 'responsive',
+              height: '100px',
+              width: '100px',
+            },
+            [source],
+            null,
+            /* opt_noLayout */ true
+          );
+          v.layoutCallback();
+          makeVisible();
+          await Promise.resolve();
+          const sources = v.querySelectorAll('video source');
+          // Cached + non cached source and in the right order.
+          expect(sources.length).to.equal(2);
+          expect(sources[0].getAttribute('src')).to.equal(
+            'https://example.com/cached-video.mp4'
+          );
+          expect(sources[1].getAttribute('src')).to.equal(
+            'https://example.com/video.mp4'
+          );
+        });
+      });
     });
 
     describe('blurred image placeholder', () => {
@@ -1013,6 +1094,14 @@ describes.realWin(
         });
       });
 
+      describe('should prerender remote video cache', () => {
+        it('with cache="*"', () => {
+          video.setAttribute('src', 'https://example.com/video.mp4');
+          video.setAttribute('cache', 'google');
+          expect(AmpVideo.prerenderAllowed(video)).to.be.true;
+        });
+      });
+
       describe('should preconnect to all sources', () => {
         let preconnect;
 

extensions/amp-video/0.1/video-cache.js

@@ -58,7 +58,7 @@ export function fetchCachedSources(videoEl, ampdoc) {
         'amp_video_host_url':
           /* document url that contains the video */ canonicalUrl,
       });
-      return Services.xhrFor(win).fetch(requestUrl);
+      return Services.xhrFor(win).fetch(requestUrl, {prerenderSafe: true});
     })
     .then((response) => response.json())
     .then((jsonResponse) =>

validator/testdata/transformed_feature_tests/amp-video-cached-source.html

@@ -0,0 +1,35 @@
+<!--
+  Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS-IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the license.
+-->
+<!--
+  Test Description:
+  Tests to verify the i-amphtml-video-cached-source attribute is forbidden in
+  transformed AMP.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+  <script async nonce src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" nonce src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <style nonce amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <link rel="canonical" href="./regular-html-version.html">
+  <script nonce type=application/ld+json>{}</script>
+  <script id=amp-rtc nonce type=application/json>{}</script>
+</head>
+<body>
+  <!-- Invalid: i-amphtml-video-cached-source is not allowed on amp-video or source -->
+  <amp-video autoplay width="720" height="405" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer> <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4" i-amphtml-video-cached-source> </amp-video>
+</body>
+</html>

validator/testdata/transformed_feature_tests/amp-video-cached-source.out

@@ -0,0 +1,38 @@
+FAIL
+|  <!--
+|    Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+|    Licensed under the Apache License, Version 2.0 (the "License");
+|    you may not use this file except in compliance with the License.
+|    You may obtain a copy of the License at
+|        http://www.apache.org/licenses/LICENSE-2.0
+|    Unless required by applicable law or agreed to in writing, software
+|    distributed under the License is distributed on an "AS-IS" BASIS,
+|    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+|    See the License for the specific language governing permissions and
+|    limitations under the license.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests to verify the i-amphtml-video-cached-source attribute is forbidden in
+|    transformed AMP.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async nonce src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-video" nonce src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+|    <style nonce amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <script nonce type=application/ld+json>{}</script>
+|    <script id=amp-rtc nonce type=application/json>{}</script>
+|  </head>
+|  <body>
+|    <!-- Invalid: i-amphtml-video-cached-source is not allowed on amp-video or source -->
+|    <amp-video autoplay width="720" height="405" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer> <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4" i-amphtml-video-cached-source> </amp-video>
+>>                                                                                                                                                                                                                                                 ^~~~~~~~~
+transformed_feature_tests/amp-video-cached-source.html:33:240 The attribute 'i-amphtml-video-cached-source' may not appear in tag 'source'. (see https://amp.dev/documentation/components/amp-video/)
+|  </body>
+|  </html>