Video.js - Autoplay and Loop not working on phone - html

Question

I use this code to make a video (eg. banner, so no controls) autoplay and loop forever.
<video id="video1" class="video-js vjs-default-skin"
controls width="900" height="500"
poster="myposter.jpg"
data-setup='{
"controls": false,
"loop": "true",
"autoplay": true,
"preload": "true"}'>
<source src="thisismyvideoyay.webm" type='video/webm' />
</video>
It works fine on my computer but on my phone (Android OS 4.2.2 with Chrome) it's not autoplaying or preloading and not looping after it finished.
I read this on Video.js page:
Auto: Start loading the video immediately (if the browser agrees). Some
mobile devices like iPhones and iPads will not preload the video in
order to protect their users' bandwidth. This is why the value is
called 'auto' and not something more final like 'true'.
I set the preload to true but it still doesn't autoplay or loop.
Is that a feature of my browser and how can I avoid that?
I tried on other browsers:
UC Browser doesn't seem to support HTML5 at all?
Stock browser shows a little video icon but doesn't show the player, too
↑ Same with Maxthon ↑

Answer 1

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();
});

Answer 2

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.

Answer 3

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

Answer 4

This works for me use this on video tag
data-setup='{ "controls": false, "autoplay": true, "preload": "auto", "loop":true }'

Answer 5

player.ready(function() {
setTimeout(function() {
player.play();
}, 1000);
});