🐛 [Story Preview] Enable amp-video to play in preview mode

[coreymasanto]

• Part of I2I: Introduce PREVIEW visibility state #37129

---

Although this PR enabled stories to play in preview mode, video elements still fail to play. This failure occurs due to the amp-video layout callback being unable to resolve in any non-visible visibility state, which ultimately blocks amp-story-page from being able to register and play the video.

Instead of indefinitely blocking registration, this PR registers media elements at the beginning of their layout callbacks, enabling videos in preview mode to play as long as they have cached sources.

[lgtm-com]

This pull request introduces 2 alerts when merging 2b8f1c2 into d365219 - view on LGTM.com

new alerts:

• 1 for Implicit operand conversion
• 1 for Variable not declared before use

[amp-owners-bot]

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/1.0/amp-story-page.js
extensions/amp-story/1.0/media-pool.js
extensions/amp-story/1.0/sources.js

[coreymasanto]

I'm testing the case where the video's cached source fails to load during preview mode and the origin source subsequently loads successfully in visible mode. My test story has a video with a single source:
<source src="./video/stampasdf.mp4?CACHED" amp-orig-src="./video/stamp.mp4?ORIGIN" type="video/mp4" i-amphtml-video-cached-source>

The one issue that remains here is that the loadPromise() call in amp-story-page.playMedia_() rejects because of this condition being met, presumably because the video element's first attempted load failed (due to the invalid cached source). This results in the video not playing after transitioning from preview to visible.

[coreymasanto]

I'm testing the case where the video's cached source fails to load during preview mode and the origin source subsequently loads successfully in visible mode.

I've updated the test amp-video's sources as follows:

<!-- Invalid URL --> <source src="./video/stampasdf.mp4?CACHED" type="video/mp4" i-amphtml-video-cached-source>
<!-- Valid URL -->   <source src="./video/stamp.mp4?NOT_CACHED" type="video/mp4">

However, I'm experiencing a testing issue where the video actually plays successfully in preview mode via the NOT_CACHED source. This occurs because the preloading of the video results in a call that adds all of the video's sources, regardless of cached state, due to this code within media-pool.register(). The removeFrom() call uses the sources on amp-video (i.e., those provided by the publisher's HTML) instead of the sources on video (i.e., those added via logic within amp-video.js).

[coreymasanto]

I managed to successfully test using my demo site by blocking the requests for the cached video sources using DevTools. As seen in the video below, the following occurs:

1. The story starts off loaded in prerender mode
2. Requests for the video's cached URLs fail
3. The story enters preview mode
4. The video fails to play and an error message is shown at the bottom of the story
5. The story enters visible mode
6. Requests for the video's origin URLs succeed
7. The video successfully plays and the error message is removed

previewPlayVideo.mov