Video.js - auto play and loop do not work on phone

Question

I use this code to make a video (like a banner, without any controls), auto play 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 does not autostart or boot, and does not loop after it finishes.

I read this on the Video.js page:

Auto: start downloading the video immediately (if the browser agrees). Some mobile devices, such as iPhones and iPads, will not preload the video in order to protect the bandwidth of their users. This is why the value is called "auto", and not something more definitive like "true".

I set preload to true, but it still does not auto-play or loop.

Is this a feature of my browser and how can I avoid this?

I tried in other browsers:

• UC Browser doesn't seem to support HTML5 at all?
• A small video is displayed in the browser in the browser, but the player is not displayed.
• ↑ The same with Maxthon ↑

Answer 1

On the phone, you cannot make it loop or preload data. But I have a solution in which you can autoplay it. You can use my code here = http://www.andy-howard.com/recreate-bbc-iplayer/index.html

And just add the function of adding clicks to the finished document. This would make the browser on the phone by clicking on the image, which then converts the data tags into video tags, which are then converted to a videojs player, which is then played :)

Hope this helps.

Answer 2

To solve the auto playback problem in iOS, do not use videojs options to automatically play the video.

In other words, this will not work:

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

Also it will not be:

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

Instead, wait for the video object to load, and then start the playback action:

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

Answer 3

You can autoplay on your mobile device if you install the 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