Video autoplay not working with muted inline.

Question

Created Jul ’22

Replies 8

Boosts 7

Views 9.4k

Participants 12

I am trying to replace gifs with mp4s on my website. Currently its working great in Chrome and Firefox, but the behavior is odd in Safari.

<video autoplay loop muted playsinline defaultmuted preload="auto">
    <source src="/path/to/video.mp4" type="video/mp4">
</video>

This video is an h264 mp4 video with no audio track.

Firefox, Chrome on my Macbook: Works as expected (autoplay's like it were a gif)
iOS Safari without Low Power Mode: Works as expected
iOS Safari with Low Power Mode: Autoplays but there is a play button on top that disappears when tapped.
macOS Safari: Does not autoplay. A play button appears and it plays if clicked.

I have been following https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari as well as other guides on the internet and it still isn't working. I'm pretty sure there is a recent change responsible for this because it used to work in an older version of desktop safari.

Boost

Answer 1

sinanisler OP

Jan ’23

I have the same problem as well.

Safari is the Internet Explorer it is just doing weird things that's the normal thing for Safari :)

1

Answer 2

eseka OP

Feb ’23

I have same problem in my site. My code looks like:

							<video class="background-video-hosted html5-video" autoplay="" muted="" playsinline="" loop="" src="***.mp4" style="width: 1440px; height: 810px;"></video>
					</div>

Only happens in low power mode. I think that the pause is forced due the low power mode but how we can consider an alternative background if this mode is enabled or how can we force it ?

0

Answer 3

mimanyi20 OP

Jun ’23

The video will not auto-play if your device is in low power mode.

5

Answer 4

Units OP

Jun ’23

I got the same problem and I've read that IOS and even some MacOS systems do not support these kind of autoplay or some animation if you paid attention.

If you have visited the apple websites in some older Macbooks animation is not played

0

Answer 5

Arun21 OP

Aug ’23

I have a problem In the Safari browser the video not playing automatically regardless of the low power mode, Please my code below and let me know any changes to be done

0

Answer 6

ShivtejG OP

Mar ’24

Bro, the most weird part over here is that on my M1 Mac Mini on Safari the video autoplays without any issues. But on my MacBook Pro, it's an issue for no evident reason 😢

0

Answer 7

gomac OP

Apr ’24

I'm finding one video in particular can play intermittently on Safari (which should give a clue but I can't figure it out) but always works in Chrome

import "./BackgroundVideo.css"; import Poster from '/react.svg' import Vid from '/video_480_320.mp4'

export const BackgroundVideo = () => {

return ( <video autoplay="" loop muted playsinline id="background-video" poster={Poster} > <source src={ Vid } type='video/mp4' /> </video> ); };

0

Answer 8

gomac OP

Apr ’24

Replying for someone else's benefit. Seems on the MacBook it was because it was on battery and low power mode. When plugged into the mains, it worked.

Not yet working on iPhone which is plugged in.

0