HTML5 Video autoplay on Mobile Browser

user_2794895 0
Viewed 73314

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.

html5-video html jquery
5 Answers

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.

user_58412250

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.

user_19201450
Related