Video.js - Autoplay and Loop not working on phone

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 ↑

You've quoted the key point: "if the browser agrees". Why are you trying to subvert the user's browser preferences? — robertc, Jul 09 '13 at 00:11
Because otherwise the user won't see the content of my site. I quoted that if I use "true" instead of "auto" it won't ask the browser whether it agrees. — Lesik2008, Jul 09 '13 at 10:36
It doesn't ask the browser whether it agrees, the browser can decide whether or not to honour the `autoplay` attribute. Mobile users have legitimate reasons not to automatically download video content over expensive and limited data connections, forcing them to do this anyway so that they will "see the content of your site" is a bad. Think about providing them with some content that will make them think it's worth their time and money to see your video rather than trying to trick the browser into spending that time and money for them. — robertc, Jul 09 '13 at 11:02
Don't be that tenacious. If it's not possible, ok, I understand that. I made that site for myself so I can watch my files on my phone. I used my WiFi-connection while trying. If someone is stupid enough to visit my site with all my picture with his mobile connection it's his fault if his data limit is full. Have a good day. — Lesik2008, Jul 09 '13 at 13:57

andrewtweber · Answer 1 · 2015-07-09T15:40:04.177

16

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

edited Jul 09 '15 at 15:40

answered Jul 07 '15 at 05:01

andrewtweber

24,520
22
88
110

2

This method also works well for Chrome. I was not able to autoplay in Chrome using just options. – Yura Omelchuk Apr 11 '16 at 19:22

score 6 · Accepted Answer · answered Jul 09 '13 at 15:42

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.

srgbnd · Answer 3 · 2018-02-11T20:24:06.817

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

edited Feb 11 '18 at 20:24

answered Feb 11 '18 at 20:09

srgbnd

5,404
9
44
80

Thank you for your reply! The Google Developers page you linked has lots of comments from the previous months which state that Google has disabled this feature again, and it isn't working anymore. Is that true? – Lesik2008 Feb 12 '18 at 10:09
@Lesik2008 it still works, I tried it yesterday. Look, this is my demo and it plays on my android http://fonotv.com – srgbnd Feb 12 '18 at 10:32
Also, I trigger the player in the ready callback function like @andrewtweber suggested: `this.play()` – srgbnd Feb 12 '18 at 10:34

score 0 · Answer 4 · answered Nov 21 '20 at 14:44

0

This works for me use this on video tag

data-setup='{ "controls": false, "autoplay": true, "preload": "auto", "loop":true }'

answered Nov 21 '20 at 14:44

Mujahid

117
1
8

score -1 · Answer 5 · edited Jun 25 '21 at 08:18

-1

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

edited Jun 25 '21 at 08:18

Minal Chauhan

6,025
8
21
41

answered Jun 25 '21 at 02:12

BigWolf

1

1

Please don't post code-only answers. For future readers it's far more interesting to see explained *why* this answers the question. Also please explain how this improves the existing answers. – Gert Arnold Jun 26 '21 at 15:13

Video.js - Autoplay and Loop not working on phone

5 Answers5

Linked