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.

Post not yet marked as solved Up vote post of Mazetron Down vote post of Mazetron
7.0k views
Posted by
Mazetron
Reply

  • 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>

    —
    Arun21
Add a Comment

Replies

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

Posted by
sinanisler
Post not yet marked as solved Up vote reply of sinanisler Down vote reply of sinanisler
Add a Comment

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 ?

Posted by
eseka
Up vote reply of eseka Down vote reply of eseka
Add a Comment

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

Posted by
mimanyi20
Post not yet marked as solved Up vote reply of mimanyi20 Down vote reply of mimanyi20

  • Oh my gosh! Thank you! You saved me!

    —
    brickasaurusrex

  • thx, I was loosing my head trying to understand why the video wasn't auto playing

    —
    stwGabriel

  • thx!

    —
    kichiku
Add a Comment

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

Posted by
Units
Up vote reply of Units Down vote reply of Units
Add a Comment

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 😢

Posted by
ShivtejG
Up vote reply of ShivtejG Down vote reply of ShivtejG
Add a Comment