[Story video] Optimize media play/pause operations on page navigation

[gmajoulet]

Here's the timeline of what happens on story page navigation:

1. touchstart the active page video is paused
2. touchend the active page video is resumed
3. click event is emulated from the previous touchend and triggers a navigation, video is paused again

These 3 media operations should be just 1 operation from (1). Play/pause operations are fast on Android, but this improvement would make iOS page navigation noticeably faster.

cc @ampproject/wg-stories

[alankent]

Here is an example web story if useful showing the problem (I think the same problem?) on my iPhone X and iPad Pro. I can get it to repeat on Mac desktop in Chrome using DevTools in iPhone X, iPad, and Pixel 2 XL mode fairly often, but I suspect device and network speed are such that you don't notice as much (the flicker is shorter).

https://alankent.github.io/extra-ordinary-amp-stories/vseries1/Ep1/Ep1back.html

To repeat:

• Open up the above web story and wait for the video on the page to finish playing
• Tap the right edge to proceed to the next page - the start of the current page flickers up before the next page video starts