Media playback is not always tied to user gesture

When automatically advancing (e.g. after a fixed amount of time) between two amp-story-page components that both contain media, the media does not always play on the second page, depending on the browser.

My guess is that this is because there is no gesture tied to the advancement, so the browser does not consider the media play() invocation to have been caused by a user gesture. Perhaps there’s a way for us to hold onto the user’s previous gesture to tie that gesture to the call to play()?

/cc @aghassemi @choumx @prateekbh @alanorozco

[newmuis]

Okay, as a quick update: The autoplay attribute helps because amp-video will use that to mute the underlying video by default. This, however, does not help in the case of unmuted videos.

Per @aghassemi’s suggestion, we can call play() on all videos when the user taps the unmute icon, and subsequently pause() any videos that shouldn’t be playing. This will bless them for future automatic playback.

However, we don’t want to require that ALL media elements exist in memory all the time. We can instead keep a pool of these media elements and swap them in/out of the DOM. We can perhaps start off with a fixed-size pool; as an optimization we might be able to calculate the size of the pool at build time, based on how many media elements would be needed to load a page and preload subsequent pages.

[newmuis]

Put together this JsFiddle to test out the maximum video limitation on iOS Safari.

Looks like the .error property gets set to MEDIA_ERR_DECODE for videos that are created beyond the limit. It also looks like it is last-played first-evicted (i.e. on my device, where the limit is 16 videos, when the 17th video is added, it immediately fails, and so on, leaving the first 16 videos intact).