Menu
I have these videos on my site with attributes listed below:
<video width="100%" poster="poster_url.png" autoplay loop muted playsinline>
<source src="video_url.mp4" type="video/mp4">
</video>
Everything worked just fine until I’ve installed Safari 11. This version shows poster images and does not autoplay videos even though they don't have an audio track. Take a look at it on my site.
I saw autoplay videos working on other sites (even without muted property) on my own laptop in Safari.
Any help would be greatly appreciated!
875
In the Safari app on your Mac, choose Safari > Preferences, then click Websites. Click Auto-Play in the list on the left. Do any of the following: Choose settings for a website in the list: Select the website on the right, then choose the option you want for it.
(the site name will be listed here). Next to Auto-Play you'll see that there are three options: Allow All Auto-Play, Stop Media with Sound (videos with audio are blocked), and Never Auto-Play (all videos are blocked). To control autoplay in Safari more generally, open the Safari menu and pick Preferences.
Video elements that include <video autoplay> play automatically when the video loads in Safari on macOS and iOS, only if those elements also include the playsinline attribute. For more information on inline playback, see Enable Inline Video Playback.
I ran into this issue as well for a short mp4 that played in the background of a website. I was able to get a solution working for iOS Safari 11 without the need for JS by qualifying the video tag with controls="true" and playsinline.
Example:
<video autoplay loop playsinline muted controls="true" src="~/background.mp4" type="video/mp4"></video>
Note: Safari doesn't support .webm so don't be like me and struggle with that for longer than you'd like to admit.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
