Safari - Video Poster Flickering with Autoplay

[filipskrivanek]

Description

Hello,

I have trouble with using attr "poster" at "video" tag, because in Safari the image is flickering.

Thank you for your help. Filip

Steps to reproduce

I`am addding my code ( it will require change paths )

<video class="video-js" playsinline
	   data-setup='{
		"controls": false,
		"autoplay": "true",
		"preload": false,
		"loop": "loop",
		"aspectRatio":"16:9",
		"fluid": true
	   }'
	   poster="{$basePath}/header-videos/{$sliderConfig["video"]}_{$videoResolution}.jpg?v=1">
	<source src="{$basePath}/header-videos/{$sliderConfig["video"]}_{$videoResolution}.mp4?v=1" type="video/mp4">
	<div class="vjs-no-js" style="background-image: url('{$basePath}/header-videos/{$sliderConfig["video"]}_{$videoResolution}.jpg')"></div>
</video>

Results

Expected

1. Video Start Loading and black background shows up
2. Image (poster) shows up
3. Video should show up instead of poster (almost in the same moment) and start autoplay

In Google Chrome it is working as I wrote upper

Actual

1. Video Start Loading and black background shows up ( OK )
2. Image (poster) shows up ( OK )
3. Image (poster) hide ( **WRONG ** )
4. Again Black background shows up ( WRONG )
5. Video shows up and start autoplay ( OK )

Additional Information

versions

videojs

7.18.1

browsers

Safari 15.4 (17613.1.17.1.13)

OSes

macOS Monterey 12.3.1

plugins

https://swiperjs.com/

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[misteroneill]

How is autoplay working if the video element is not muted? That should not be possible without changing Safari's permissions to be more lenient.

This may be a side-effect of events that are triggered during the autoplay scenario. Would have to see a reduced test case to understand precisely what's happening.

[filipskrivanek]

I tried change value (true/false) for parameter "muted" but without any change. On Safari image still flickering in safari (In Chrome it is OK)

[filipskrivanek]

Hello,

is there any progress with testing or simulation ?

Thank you, Have a nice day, Filip

[constgen]

How is autoplay working if the video element is not muted? That should not be possible without changing Safari's permissions to be more lenient.

muted is not required if the video doesn't contain an audio stream