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) =>