[Video] fallback on origin sources if request to video cache fails

Description

When publishers are opted-in for a video cache (amp-video[cache=*]), a XHR is sent to the cache provider, and the XHR response is the buildCallback's response.
If that XHR fails (non 20x HTTP codes), the buildCallback fails, and the video playback fails. That is wrong, and we should use the origin sources for video playback.

Relevant code pointers:

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

Line 271 in 172a408

return fetchCachedSources(

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

Lines 22 to 63 in 172a408

    
           export function fetchCachedSources( 
        
             videoEl, 
        
             ampdoc, 
        
             maxBitrate = Number.POSITIVE_INFINITY 
        
           ) { 
        
             const {win} = ampdoc; 
        
             // Keep non cached evergreen sources for crawlers. 
        
             if (Services.platformFor(win).isBot()) { 
        
               return Promise.resolve(); 
        
             } 
        
             if ( 
        
               !( 
        
                 videoEl.getAttribute('src') || 
        
                 videoEl.querySelector('source[src]')?.getAttribute('src') 
        
               ) 
        
             ) { 
        
               user().error('AMP-VIDEO', 'Video cache not properly configured'); 
        
               return Promise.resolve(); 
        
             } 
        
             Services.performanceFor(ampdoc.win).addEnabledExperiment('video-cache'); 
        
             const {canonicalUrl, sourceUrl} = Services.documentInfoForDoc(win.document); 
        
             maybeReplaceSrcWithSourceElement(videoEl, win); 
        
             const videoUrl = resolveRelativeUrl(selectVideoSource(videoEl), sourceUrl); 
        
             return getCacheUrlService(videoEl, ampdoc) 
        
               .then((service) => service.createCacheUrl(videoUrl)) 
        
               .then((cacheUrl) => { 
        
                 const requestUrl = addParamsToUrl(cacheUrl.replace(/\/[ic]\//, '/mbv/'), { 
        
                   'amp_video_host_url': 
        
                     /* document url that contains the video */ canonicalUrl, 
        
                 }); 
        
                 return Services.xhrFor(win).fetch(requestUrl, {prerenderSafe: true}); 
        
               }) 
        
               .then((response) => response.json()) 
        
               .then((jsonResponse) => 
        
                 applySourcesToVideo(videoEl, jsonResponse['sources'], maxBitrate) 
        
               ) 
        
               .catch(() => { 
        
                 // If cache fails, video should still load properly. 
        
               }); 
        
           }

Ensuring that fetchCachedSources always resolve, either from amp-video or from video-cache, should work just fine.

Reproduction Steps

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

@coreymasanto

cc @coreymasanto no idea why I can't assign you

Update: this might be breaking up to 3% of video playbacks today. Videos impacted don't even build so I think they might be excluded from our dashboards. I'll run some tests and see if this should be raised to P0.

Update: red herring, everything is fine

Navigation Menu

Repository navigation

[Video] fallback on origin sources if request to video cache fails #36071

Description

Reproduction Steps

Relevant Logs

Browser(s) Affected

OS(s) Affected

Device(s) Affected

AMP Version Affected

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	export function fetchCachedSources(
	videoEl,
	ampdoc,
	maxBitrate = Number.POSITIVE_INFINITY
	) {
	const {win} = ampdoc;
	// Keep non cached evergreen sources for crawlers.
	if (Services.platformFor(win).isBot()) {
	return Promise.resolve();
	}
	if (
	!(
	videoEl.getAttribute('src') \|\|
	videoEl.querySelector('source[src]')?.getAttribute('src')
	)
	) {
	user().error('AMP-VIDEO', 'Video cache not properly configured');
	return Promise.resolve();
	}

	Services.performanceFor(ampdoc.win).addEnabledExperiment('video-cache');

	const {canonicalUrl, sourceUrl} = Services.documentInfoForDoc(win.document);
	maybeReplaceSrcWithSourceElement(videoEl, win);
	const videoUrl = resolveRelativeUrl(selectVideoSource(videoEl), sourceUrl);
	return getCacheUrlService(videoEl, ampdoc)
	.then((service) => service.createCacheUrl(videoUrl))
	.then((cacheUrl) => {
	const requestUrl = addParamsToUrl(cacheUrl.replace(/\/[ic]\//, '/mbv/'), {
	'amp_video_host_url':
	/* document url that contains the video */ canonicalUrl,
	});
	return Services.xhrFor(win).fetch(requestUrl, {prerenderSafe: true});
	})
	.then((response) => response.json())
	.then((jsonResponse) =>
	applySourcesToVideo(videoEl, jsonResponse['sources'], maxBitrate)
	)
	.catch(() => {
	// If cache fails, video should still load properly.
	});
	}

[Video] fallback on origin sources if request to video cache fails #36071

Description

Description

Reproduction Steps

Relevant Logs

Browser(s) Affected

OS(s) Affected

Device(s) Affected

AMP Version Affected

Activity

gmajoulet commented on Sep 14, 2021

gmajoulet commented on Sep 14, 2021

gmajoulet commented on Sep 14, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions