HTML5 Video autoplay on Mobile Browser

Question

I am using the following HTML5 and JQuery code to play a playlist of videos whose URLs are in an array URLArray[].

function NextFrag(){

 if (index < URLA         


        

Answer 1

Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

Chrome 53 on Android also allowing muted video autoplay: https://developers.google.com/web/updates/2016/07/autoplay

Answer 2

What was missing for me in almost all answers I found on this topic is that I needed the playsinline attribute to work properly in mobile browsers (do not play fullscreen, instead embed it to the content of the website)

So my full example would be:

<video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
  <source data-src="/video.mp4" type="video/mp4">
</video>

Answer 3

On Mobile Chrome I had the Data-Saving option enabled, which by default disables autoplay muted videos, for which case GIF's are a partial low-quality+high-bandwith solution.

Answer 4

I was having issues when autoplaying videos on iOS 11. Android and iOS 10.3 worked fine with a solution equal to those provided by Pointi and Rihards.

The Mobile Safari on iOS 11 seems to be a little more of a diva again. Please make sure to add the prefixed attribute (webkit-playsinline) as well.

<video playsinline webkit-playsinline autoplay muted loop>
  <source src="./video.mp4" type="video/mp4">
</video>

This solution works in every popular desktop-browsers as well as on Android Chrome and iOS 10/11 Safari/Chrome. It even works in most Inline-Browsers as for example in the Facebook-App (tested on iOS 11).

Finding this out cost me hours, so I hope I can be a help at least for you.

Answer 5

UPDATE - January 2017: Since this answer is still getting me rep, I strongly encourage anyone reading this to check out the answer from Rihards and give it some love. Rihards' references are more modern than this answer and should help if you need auto-play in browser.

---

The auto play limitation in mobile browsers is an intentional limitation put in by the OS developers. To my knowledge, there is absolutely no way to auto play content in a mobile browser because the event that is required to trigger content play is an OS/Phone event, one which the browser itself has no control over or interaction with.

Facebook has implemented a video auto play feature to its advertising arsenal, but this is only through its native app. Even the mighty FB must surrender its will to the power of the phone gods.

I found one article about this new FB ad presentation technique that had some users in the comments section complaining about a way to disable autoplay in browsers like you can with the native FB app:

Facebook to Add Auto-Play Video to NewsFeed for All Mobile Users

But this is obviously a hypothetical complaint and banter because the comments were made prior to FB fully launching that feature.

My conclusion: If you absolutely need auto play, you are going to have to go "native" (ha... see what I did there?).