Video.js - Autoplay and Loop not working on phone Video.js - Autoplay and Loop not working on phone google-chrome google-chrome

Video.js - Autoplay and Loop not working on phone


To solve the autoplay issue on iOS, do not use the videojs options to autoplay the video.

In other words, this will not work:

<video id="my-video-id" autoplay></video>

Neither will this:

videojs('my-video-id', {    "autoplay": true});

Instead wait for the video object to load and then trigger the play action:

videojs('my-video-id').ready(function() {    this.play();});


On a phone, there's no way you can get it to loop or preload data. But I do have a solution where you could autoplay it. You could use my code here = http://www.andy-howard.com/recreate-bbc-iplayer/index.html

And simply add an addition click function on the document ready. This would then make the browser on the phone click the image, which then in turn converts the data tags to video tags, which then converts to the videojs player, which then plays :)

Hope that's helpful.


On mobile, you can autoplay if you put muted option

<video autoplay muted>  <source src="video.webm" type="video/webm" />  <source src="video.mp4" type="video/mp4" /></video>

Chrome v53: https://developers.google.com/web/updates/2016/07/autoplay

iOS 10 : https://webkit.org/blog/6784/new-video-policies-for-ios