Video disappears after calling play() until loaded even with poster present

• Component: Media
• Status: NEW ---

[Igor Z]

Steps to reproduce:
- Open test page https://jsfiddle.net/e8rwja10/1/.
- Click on the video
- Image disappears for some time(up to a second), then reappears again (causing a flash/blink) and video starts playing. Also sometimes the element height decreases and and makes content below to jump for a second.

Expected behavior: the video element should display poster and retain its dimensions until enough data is loaded to show the first video frame and calculate video dimensions. Then it should seamlessly switch to displaying video. Same way it works in Safari 13.1 and latest Chrome / Firefox.

Possibly related bug: https://bugs.webkit.org/show_bug.cgi?id=226960. But mine happens on Safari on desktop and also was introduced with Safari 15.

[Radar WebKit Bug Importer]

<rdar://problem/86991394>

[Jer Noble]

This was caused by https://commits.webkit.org/r269407, where we modified when the poster frame is shown and hidden to more closely follow the HTML specification.  In that specification it says:

> The internal play steps for a media element are as follows:
> ...
> 3 If the media element's paused attribute is true, then:
> 3.1  Change the value of paused to false.

And we do so now. When the page calls play(), we hide the poster.

The video element in question also has `load="metadata"` set. So we don't even begin loading media data until play() is called.

This seems to behave per-spec.

[Jer Noble]

If you want to do the example seamlessly, the "onclick" handler should call 'el.load()',  then wait for the "canplaythrough" event before beginning playback.

[Igor Z]

(In reply to Jer Noble from comment #3)
> If you want to do the example seamlessly, the "onclick" handler should call
> 'el.load()',  then wait for the "canplaythrough" event before beginning
> playback.


I've updated the code as was proposed, but still the video starts with blinking:

https://jsfiddle.net/dzrp0vo2/4/ 

Also tried with canplay and timeupdate events just in case, same effect. Safari Version 15.2 (17612.3.6.1.6)

[Youssef Soliman]

(In reply to Igor Z from comment #4)
> (In reply to Jer Noble from comment #3)
> > If you want to do the example seamlessly, the "onclick" handler should call
> > 'el.load()',  then wait for the "canplaythrough" event before beginning
> > playback.
> 
> 
> I've updated the code as was proposed, but still the video starts with
> blinking:
> 
> https://jsfiddle.net/dzrp0vo2/4/ 
> 
> Also tried with canplay and timeupdate events just in case, same effect.
> Safari Version 15.2 (17612.3.6.1.6)

Can you verify if the problem still exists in Safari 15.4? I am currently unable to reproduce it with this jsfiddle https://jsfiddle.net/dzrp0vo2/4/

[Igor Z]

Created attachment 459491 [details]
Quicktime Video record of bug, reproduced in Safari 15.4

[Igor Z]

(In reply to Youssef Soliman from comment #5)
> (In reply to Igor Z from comment #4)
> > (In reply to Jer Noble from comment #3)
> > > If you want to do the example seamlessly, the "onclick" handler should call
> > > 'el.load()',  then wait for the "canplaythrough" event before beginning
> > > playback.
> > 
> > 
> > I've updated the code as was proposed, but still the video starts with
> > blinking:
> > 
> > https://jsfiddle.net/dzrp0vo2/4/ 
> > 
> > Also tried with canplay and timeupdate events just in case, same effect.
> > Safari Version 15.2 (17612.3.6.1.6)
> 
> Can you verify if the problem still exists in Safari 15.4? I am currently
> unable to reproduce it with this jsfiddle https://jsfiddle.net/dzrp0vo2/4/

Yes, the problem still exists, I've recorded a video and attached it here. Full version is Version 15.4 (17613.1.17.1.13) on macOS 12.3.1 (21E258)

On the video I open the jsfiddle page and just tap on the video element once. The blinking white background is the reported problem.

[Youssef Soliman]

Created attachment 459510 [details]
Test Case on TPS Release 145 (Safari 15.4, WebKit 17614.1.11.6)

[Youssef Soliman]

(In reply to Igor Z from comment #7)
> (In reply to Youssef Soliman from comment #5)
> > (In reply to Igor Z from comment #4)
> > > (In reply to Jer Noble from comment #3)
> > > > If you want to do the example seamlessly, the "onclick" handler should call
> > > > 'el.load()',  then wait for the "canplaythrough" event before beginning
> > > > playback.
> > > 
> > > 
> > > I've updated the code as was proposed, but still the video starts with
> > > blinking:
> > > 
> > > https://jsfiddle.net/dzrp0vo2/4/ 
> > > 
> > > Also tried with canplay and timeupdate events just in case, same effect.
> > > Safari Version 15.2 (17612.3.6.1.6)
> > 
> > Can you verify if the problem still exists in Safari 15.4? I am currently
> > unable to reproduce it with this jsfiddle https://jsfiddle.net/dzrp0vo2/4/
> 
> Yes, the problem still exists, I've recorded a video and attached it here.
> Full version is Version 15.4 (17613.1.17.1.13) on macOS 12.3.1 (21E258)
> 
> On the video I open the jsfiddle page and just tap on the video element
> once. The blinking white background is the reported problem.

Can you try to reproduce it on the latest Safari TPS?

[Igor Z]

(In reply to Youssef Soliman from comment #9)
> (In reply to Igor Z from comment #7)
> > (In reply to Youssef Soliman from comment #5)
> > > (In reply to Igor Z from comment #4)
> > > > (In reply to Jer Noble from comment #3)
> > > > > If you want to do the example seamlessly, the "onclick" handler should call
> > > > > 'el.load()',  then wait for the "canplaythrough" event before beginning
> > > > > playback.
> > > > 
> > > > 
> > > > I've updated the code as was proposed, but still the video starts with
> > > > blinking:
> > > > 
> > > > https://jsfiddle.net/dzrp0vo2/4/ 
> > > > 
> > > > Also tried with canplay and timeupdate events just in case, same effect.
> > > > Safari Version 15.2 (17612.3.6.1.6)
> > > 
> > > Can you verify if the problem still exists in Safari 15.4? I am currently
> > > unable to reproduce it with this jsfiddle https://jsfiddle.net/dzrp0vo2/4/
> > 
> > Yes, the problem still exists, I've recorded a video and attached it here.
> > Full version is Version 15.4 (17613.1.17.1.13) on macOS 12.3.1 (21E258)
> > 
> > On the video I open the jsfiddle page and just tap on the video element
> > once. The blinking white background is the reported problem.
> 
> Can you try to reproduce it on the latest Safari TPS?


Indeed I can't reproduce it in Technology Preview Release 145 (Safari 15.4, WebKit 17614.1.11.6) on https://jsfiddle.net/dzrp0vo2/4/.


Same version and https://jsfiddle.net/e8rwja10/1/ (from initial bugreport) still blinks, but I guess that was intended? (Although white background douesn't blink in latest Firefox and Chromium)

[Johannes Odland]

From what I can see after 15.5, the poster disappears on .play(), but the video will not show until enough data is available to play through. 
 

The second jsfiddle (https://jsfiddle.net/dzrp0vo2/4/) waits for canplaythrough before hitting play. The poster is visible until it is replaced by the video.

The first jsfiddle ( https://jsfiddle.net/e8rwja10/1/) triggers play directly. The poster image dissapears, and some frames show a transparent video element until the enough data is available to play the video.

The user experience this as the video 'blinking' or 'flashing'. 
This was not a problem before Safari 14, and other browsers don't have this problem. 
After the latest patch, the issue appears both in desktop and iOS Safari.



It is now necessary to use JS, preload the video and wait for canplaythrough before playing a video. Pure html video elements with no js will blink (https://codepen.io/johannesodland/pen/XWMNvdW)