Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bad loading experience in Story: Flash of white between video poster and video playback #31358

Closed
cramforce opened this issue Nov 30, 2020 · 3 comments

Comments

@cramforce
Copy link
Member

To repro

  1. Load this URL https://www.lonelyplanet.com/stories/8-unusual-animal-migrations/ with a fast but not ultra fast connection
  2. Observe that some kind of poster loads quickly
  3. Then there is a white flash (page background color)
  4. And then the video loads.

What browsers are affected?

Chrome Android

Which AMP version is affected?

Tested with current stable

@gmajoulet
Copy link
Contributor

Additional note: this might behave different on iOS and Android. Android has some custom code within amp-video to handle poster images.

/**
* Android will show a blank frame between the poster and the first frame in
* some cases. In these cases, the video element is transparent. By setting
* a poster layer underneath, the poster is still shown while the first frame
* buffers, so no FOUC.
* @private
*/
createPosterForAndroidBug_() {
if (!Services.platformFor(this.win).isAndroid()) {
return;
}
const {element} = this;
if (element.querySelector('i-amphtml-poster')) {
return;
}
const poster = htmlFor(element)`<i-amphtml-poster></i-amphtml-poster>`;
const src = element.getAttribute('poster');
setInitialDisplay(poster, 'block');
setStyles(poster, {
'background-image': `url(${src})`,
'background-size': 'cover',
'background-position': 'center',
});
poster.classList.add('i-amphtml-android-poster-bug');
this.applyFillContent(poster);
element.appendChild(poster);
}

cc @ampproject/wg-stories

@mszylkowski mszylkowski self-assigned this Dec 14, 2020
@mszylkowski
Copy link
Contributor

So far what I've found:

The amp-videos on Android (may also happen on iOS, don't have a device to test) remove the poster before displaying the first frame of the video. Was able to reproduce on a regular video element, so it's a problem related to the way the video element works. Only happens on videos with posters.

Also, the firstLayoutCompletedmethod from amp-video doesn't get called when the video starts playing, it gets called when the loadedmetadata event is first triggered, which happens fractions of a second before the video starts playing. Therefore, it hides the poster before it should, and the background flashes.

From all HTMLMediaElement events, timeupdate is the only one that guarantees that a frame is playing, so we can listen to that event after the video is swapped in order to know when to hide the placeholder. All play or playing or loaded... events don't guarantee the video is actually playing, which is weird and the source of this bug. This fix works perfectly on Android (haven't tested on iOS)! It hides the poster image right when the video starts playing. Would have to check other implementations

I tried to dig into the video implementation specs on HTML Spec and couldn't find the reason why there's a delay between the playing event and the first frame, but it doesn't happen on desktop so my assumption is that it doesn't have to do with the specs but with the specific implementation details...

@stale
Copy link

stale bot commented Jun 12, 2022

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.

@stale stale bot added the Stale Inactive for one year or more label Jun 12, 2022
@stale stale bot closed this as completed Jun 23, 2022
wg-stories Fixit automation moved this from In progress to Done Jun 23, 2022
wg-stories Sprint automation moved this from In progress to Done Jun 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Development

Successfully merging a pull request may close this issue.

3 participants