Video autoplay not working with muted inline.

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.

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 :)

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 ?

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

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

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

<video id="banner-promo-player" playsinline="" defaultmuted="" autoplay="" muted="" src="****" ></video>

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 😢

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> ); };

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.

Video autoplay not working with muted inline.
 
 
Q