Moving to next page in web story is replaying first few frames of current page on slower devices

[alankent]

Description

Expected behavior: Here is a web story https://alankent.github.io/extra-ordinary-amp-stories/vseries1/uep1/ . Each page has a video clip. When finished, you tap on right edge to proceed to next page and next video clip starts. You should see the video on each page one after the other (so it is like playing a video through the clips with pauses at page breaks).

What is happening: When proceeding to the next page, the video of the current page starts playing for a few frames before jumping over to the video on the next page. Recording the screen on my iPhone and stepping through it frame by frame shows multiple frames being displayed (so it is not just the poster image of the current page being displayed for example).

This feels bad as you see a flicker of incorrect content before the correct content is displayed.

Environment: I have tried on Chrome and Safari on Mac and my iPhone. It is hard to see on my mac (but can see it sometimes if watch carefully and do it a few times). It is easy to see on my iPhone with Safari - I assume because a slower device? I have not tried an Android phone or other browsers. I have seen it in Chrome and Safari on Mac at least once, but it is hard to repeat (and trust my eyes). It is much more noticeable and consistent on my iPhone X in Safari.

Reproduction Steps

1. Open the following URL on an iPhone (I can repeat on other devices, but I have found it easiest to see on my iPhone) https://alankent.github.io/extra-ordinary-amp-stories/vseries1/uep1/
2. Wait for the video on a page to finish playing.
3. Tap the right edge to go to the next page, carefully watching the screen (a few frames from the video of the page being left are frequently shown, which feels jarring)

I can repeat on multiple pages in the story (so the dim overlay does not seem to be the issue).

Relevant Logs

No response

Browser(s) Affected

Chrome, Safari

OS(s) Affected

iPhone, Mac

Device(s) Affected

iPhone X, Macbook Pro

AMP Version Affected

No response

[alankent]

https://user-images.githubusercontent.com/5702163/127719066-b4b5b1f7-da97-4117-a6bb-f17ec60b0042.mov

Single step through the last second of the video clip. This is a screen recording of my iPhone. You can see the pause then then 2 frames of the current video display before starting on the next video clip.

[newmuis]

Was this story using a time-based auto-advance? Or did you provide the ID of the media element in the auto-advance-after attribute?

(It looks now as if this is configured to manually advance)

[alankent]

It was not using time based auto advance. I did not use auto-advance-after attribute. It is manual tap to proceed to next page.

[newmuis]

Sorry, just so I'm clear: the video is looping (albeit 2 frames), despite not having a loop attribute and not being auto-advance?

[alankent]

Correct.

[alankent]

Note: the URL above (https://alankent.github.io/extra-ordinary-amp-stories/vseries1/uep1/) has the exact markup of the story if you want to check it. I just opened the URL on my iphone X and it is still happening quite visibly. I don't notice it on my Mac desktop.

[alankent]

Oh, and to add, hosting on Firebase rather than GitHub behaves the same. If I let the video finish playing, then tap to next page shows a few frames of the current video before doing the next one. If I tap to next page while the video is still playing then it jumps across immediately.

[alankent]

Interesting. If I tap to go to previous page, and the previous page is a static image (no video on page), it still displays first frame of current page video. It's like an old video player is not removed fast enough so it starts replaying the current video again (rather than the next page video player displaying the old video for a few frames before switching to the new player) ... if that makes sense. (This is testing with a different story where I inserted a static image in the middle between videos.)

[alankent]

To provide a demo, I inserted a new random page 6 as a static image. Go to page 7 (walking across street), wait for video to stop playing, then hit the back page (tap on left edge of page) and you will see the first frame or two of the current video before it displays the static image.

So it feels to me like the video player on the current page gets a signal to start up again before it is removed from view.

[alankent]

I was viewing https://blog.nasdaily.com/web-stories/the-decision-trap/ and noticed no rewind to the start like mine, but instead a white gap between videos (it was using auto-advance). I tried using the same markup (auto-advance, same template, etc) but I still get the same behavior (first few frames of current video replay before jumping to next page).

Note: nasdaily looks like it is optimized on the origin, mine is not (raw AMP). I THINK THIS MATTERS (see below).

So I tried looking at the network trace in Chrome developer tools. There is a difference there in how the video is accessed.

The nasdaily post trace shows a nice clear report.

My page (dirtied a bit I suspect by service worker caching) shows a stranger trace. I have "cancelled" requests in there (red), followed by another request for the video after the cancelled one.

Loading from firebase instead of GitHub results in a similar pattern.

So I copied and pasted the HTML from nasdaily.com into my page, then injected my URLs into it (I deleted all the CSS at the top of the page). Again, looked like a decent trace from nasdaily markup, red cancels from my markup.

After LOTS of experimentation, it looks like if I delete class="i-amphtml-layout-container" i-amphtml-layout="container" from the file, then I get the weird cancel stuffers. If I include them, it seems to play better. So I assume the extra processing caused by the lack of AMP optimization is causing the visual stutter. With the AMP optimizer on, you don't see it any more I assume because its faster going to the next page (or something like that).

[alankent]

Okay, testing some more, it seems like the "cancelled" messages may be red herrings. Putting the optimizer over the page did not fix the issue either. It still displays start of current video before moving on to video of next page. Oh well, back to the drawing board!

[alankent]

I had another screen shot with poster images as well. White blank flash between pages now, then video with first frames of previous page. I captured another video so sharing here in case useful (I realize this is not a priority right now, but its not a very nice experience).

https://drive.google.com/file/d/1rGY3EQgG_BC5hXpOKUce4R-XoixaPTpl/view?usp=sharing

[tomxbarnesx]

I'm noticing too the behavior @alankent described in his last comment and find it pretty disruptive to the experience. Has this been roadmapped // any more investigation into this by the team?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.