0

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?

Soroush
  • 541
  • 4
  • 17
auto
  • 1,062
  • 2
  • 17
  • 41

1 Answers1

0

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:

enter image description here

Mick
  • 24,231
  • 1
  • 54
  • 120
  • Thanks but it doesn't workin in iOS. The latest iOS seems seems to no longer allow autoplay. – auto Oct 23 '19 at 17:29
  • @auto - yes iOS has different rules, but it should still auto play if you meet the criteria, See update to answer. – Mick Oct 23 '19 at 18:42
  • Nnot working for me either, receiving a MediaStream via WebRTC. I've those attributes on the video element, I also set them again with js prior to adding a new MediaStream created with only first video MediaStramTrack from receiverds stream. element.play() is also rejected – netizen Jul 21 '20 at 16:20
  • @netizen - the source video in the snippet appeared to have an issue so I changed it and verified it again. The snippet above should work now if you run it on Safari. If you mean that your own example won't work, then it might be with posting a serrate question explains the WebRTC interaction in particular and sharing the link if you are able to also. – Mick Jul 22 '20 at 10:31
  • I can't post that code, but scenario is like here you have a pseudo URL that allows you to view our stream, clicking it would send a websocket message which if approved starts a webrtc negotiation that ends on a PeerConnection receiving an stream event. That stream is used locally to create a video element (with all four attributes set in html and js), assigning the stream to srcObject and trying it to play. I've changed the order of many things as haveing the video element already in DOM and so. Only Safari in iOS refuses to play, so we ended adding a play button when required. – netizen Jul 24 '20 at 15:23
  • @netizen - sounds like an interesting project. It might be interesting to see if you change the source to a regular video stream, e.g. the one in the answer above, would it work? That would give a feel for whether the issue has an relation to the WebRTC stream setup/preparation. – Mick Jul 24 '20 at 15:44