Background video not auto playing on mobile iOS safari browser used svelte to build the website

[santhoshnumberone]

Describe the bug

Video tag no auto play on page load only in iOS mobile environment. I have not checked on iPad, it does play on Macbook air

I have followed everything mentioned by Delivering Video Content for Safari
It is an MP4 file format as suggested

<video autoplay playsinline>

I though early on that this might be a programming issue so raised the issue stackoverflow as well Background video not auto playing on safari browser used svelte to build the website

Used muted as well the mp4 file has no audio.

<video autoplay playsinline muted>

Many users facing the same issue from long time
HTML5 Video Background not playing Safari on iPhone
HTML5 Video tag not working in Safari , iPhone and iPad
I even tried <video autoplay playsInline muted> playsInlinestill same issue

Reproduction

I have deployed the video hereusing github pages you can open the link through apple mobile devices iPhone or iPad and check the issue yourself.

It is not playing on Chrome and Safari browser, I guess it might be the same for other browsers as well

Logs

I don't have an apple device, a friend told me he could not view the video on website through his `iPhone`

System Info

Don't have `iPhone` or `iPad` to give more details sorry

Severity

annoyance

[Prinzhorn]

https://github.com/sveltejs/svelte/search?q=video+autoplay&type=issues
#6536

[nelsonvassalo]

Did this issue have any update? Still reporting it on desktop safari, Chrome is fine

[santhoshnumberone]

The video format is AV1 which is not supported by safari on any apple device source. You could use HEVC/X265 format as it is supported on apple device source.
Best approach would be to have video source pointing to three different format AV1,X265 and WebM let the browser decide which one it wants to use.

[nelsonvassalo]

Does that mean H.264 is now unsupported on iOS?

[santhoshnumberone]

Does that mean H.264 is now unsupported on iOS?

I think you are referring to safari browser not the iOS.

x264 is still suppose to be supported on safari according to this link.

If you have a video already in x265 format or a short video you can convert to x265 which you want on the webpage. It would help in reducing file size directly Impacting your page load time as well as save some MB for the user.

[avinash403]

Surprisingly, Safari supports background video as a background image. You can use a combination of video element and background image to get it to work in all modern browsers. Here's a working background video on my website using the same principle: https://thedevengine.com

I couldn't get it to work using any other solution I found on google

UPDATE: My website has been updated and above link doesn't have a background video anymore. Though I have written an article on how to fix it here:

[jannisborgers]

Surprisingly, Safari supports background video as a background image. You can use a combination of video element and background image to get it to work in all modern browsers. Here's a working background video on my website using the same principle: https://thedevengine.com

I couldn't get it to work using any other solution I found on google

Thank you, Avinash! This issue keeps popping up every once in a while and it seems that every time, the conditions for why it doesn’t work change. This now works in all browsers I tested.