Using "Gifs" in Safari and IOS: Videos won't autoplay

Question

Instead of using true gifs, we are using mp4 videos that loop (in order to save load time)

However, Safari is refusing to autoplay the videos, even with autoplay loop muted playsinline.

Is there a way to create looping videos/gifs that do not require large file sizes and can autoplay in mobile

My video tags look like:

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                Your browser does not support video tag
</video>

Have also tried:

 <video preload autoplay muted playsinline loop>
                <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                    Your browser does not support video tag
    </video>

In some cases I want the gif to start when a user scrolls to a specific point. So I use:

if (/* user scrolls to div */){
   document.getElementById('my-video').play();
}

Is there a way to have videos autoplay in Safari, or any best practice alternatives?

Mick Mick · Accepted Answer · 2019-10-23T08:56:37

Your HTML5 actually works fine with a different source video - the following runs in Safari 12.1.1 on Mac OSX 10.14.5:

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'>
                Your browser does not support video tag
</video>

It may be that there was be an issue with the video source you were using or the network or server it is on - for example, it is very slow loading and won't play in Chrome or Safari when I test it directly.

If you are seeing the same issue with another video, it may be that there is a format issue or that there is some server to safari indication issue which have been seen previously, although the root cause is not clear at this time: Safari 9.0 can not play mp4 video on the storage server

Either way, there is nothing obvious wrong with your original HTML5 above.

For iOS, there are specific auto play rules - at the time of writing these are the most recent AFAIK (https://webkit.org/blog/6784/new-video-policies-for-ios/):

By default, WebKit will have the following policies:

Using "Gifs" in Safari and IOS: Videos won't autoplay

1 Answers