29

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 < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

As we know that the autoplay feature of HTML5 is disabled in all mobile phones, as a result I have to play manually each video clip on mobile phone. which is definitely what I do not want.

I really want to know the alternative to this. I am really interested in code segment that I can include to make like autoplay without involving user to interact.

Is it possible to convert this to an android app to work. I am really in need to make it work like a play list, and I have no concern about how, I just need this functionality.

Please help.

SotonJ
  • 327
  • 1
  • 3
  • 10
  • 1
    I found a trick to make autoplay working on mobile devices, you can found my answer below and give it a try then: http://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad/29540123#29540123 – Goon Nguyen Apr 09 '15 at 13:40

5 Answers5

40

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

Rihards
  • 10,241
  • 14
  • 58
  • 78
36

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?).

Ryan McCoy
  • 484
  • 1
  • 7
  • 11
  • @Harikrishnan Thank you very much for the information. I will consider it for the future. I appreciate your time. – SotonJ Mar 30 '14 at 00:41
  • 4
    This is going to be a HUGE problem for WebVR (where users cannot touch the screen). – rainabba Feb 13 '15 at 22:33
  • @rainabba, how is youtube able to autoplay video with audio? – moeseth Aug 18 '17 at 10:58
  • @moeseth YouTube doesn't autoplay video with audio on mobile browsers, it autoplays muted and you need to tap a button to unmute it. On the native app, they can do what they want and they autoplay with audio. – Alejandro García Iglesias Nov 14 '19 at 15:56
  • Any news on this? – John Doe Dec 17 '19 at 18:07
  • @JohnDoe browser developers and phone manufacturers, as a general rule, will always actively try to control what content can and can not be auto-played WITH sound in a web app. Since my answer, most browser+platform combos allow auto-play while muted. Many also allow auto-play with sound, but there are rules that determine when this is permitted. TL;DR version = if you want autoplay with sound in a web app, you need to research first the policies around autoplay for the specific phone platform AND THEN the policies for the specific browsers you will support on said platforms. – Ryan McCoy Dec 18 '19 at 07:05
3

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.

Malte Peters
  • 84
  • 1
  • 9
  • I tried this with one video and worked great in mobile. But when I used 4 videos distributed in the page as you scroll, I got diferente results, sometimes only 2 autoplay, or none, depending on device, and size of video, apparently. – brohr Dec 11 '17 at 19:58
  • afaik it is not possible to autoplay more than one video on iOS, since iOS stops one video if another one will be started. – Malte Peters Jan 08 '18 at 09:58
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>
Pointi
  • 334
  • 3
  • 8
2

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.

DavidTaubmann
  • 3,223
  • 2
  • 34
  • 43