Player.js: Vimeo player autoplay feature does not work on mobile devices

[gary0033]

Vimeo's code to automatically start a video on the Vimeo player when loaded without having to press the play button is: autoplay=1. However, Vimeo states that this will not work on mobile devices using Vimeo's player. Autoplay does work on external (third party) players linked to Vimeo.

Two questions: Is there any technological issue that prevents Vimeo from offering an autoplay option on their own embedded player?
Second, is there a way to get the Vimeo player to autoplay on mobile devices? A work around?

[luwes]

I see https://webkit.org/blog/6784/new-video-policies-for-ios/
We will put this in soon, sorry for the delay on this.

[gldsgns]

Hey luwes, just checking.... did this change rollout in the past few hours (day)? Was troubleshooting the issue and it suddenly went away without any obvious changes to my site or its code... autoplay is working

[luwes]

strange, it's actually not in yet @gldsgns :) it's disabled for most touch devices.

[gldsgns]

Ah, then it must be related to a workaround I inadvertently enabled with the embed. Thanks for the reply.

[warmac92]

@gldsgns could you please share some information about the workaround. I need to do it for a client's project. Autoplay works fine on desktop devices but not on mobile devices.

[warmac92]

@luwes I would be very thankful if you can comment about any updates for this change.

[gldsgns]

I ended up using a wordpress plugin, Revolution Slider

On Wed, Mar 7, 2018 at 9:58 AM Abhishek Shrivsatava <
[email protected]> wrote:

@gldsgns https://github.com/gldsgns could you please share some
information about the workaround. I need to do it for a client's project.
Autoplay works fine on desktop devices but not on mobile devices.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vimeo/player.js/issues/199#issuecomment-371224382,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AiUFwrhvPzPD7eDMKGZWewCrKFfCEaejks5tcB6GgaJpZM4RjRzR
.

>

Patrick David Coan
503.954.8834
[email protected]

[ActonBV]

@gldsgns can you let me know how you got a vimeo video to autoplay on mobile using Rev Slider?

[RiccardoZaffalon]

Hi @luwes and everyone, anything new about this? It would be very useful to have!
+1

[luwes]

Autoplay on mobile works now if muted is enabled.

[smithsmithsmithsmith]

@luwes I've tried everything and it still doesn't work

I'm currently using: api=1&background=1&muted=1&loop=1&autoplay=1

The only way to get the video to play on mobile is to tap and hold for 2+ seconds. Help!

[gldsgns]

To clarify, it's not true autoplay- simply the ability for my custom button to play the video without pressing the vimeo play button. This wasn't working because of the prohibition of autoplay on mobile, but the RevSlider has a setting "No Poster On Mobile" in the Vimeo layer which allows the Vim. Play to be triggered.

[smithsmithsmithsmith]

I see, I'm utilizing this video embed in Shopify and don't have access to
RevSlider. Any thoughts on how to remove the poster on mobile?

On Fri, Mar 30, 2018 at 11:30 AM, gldsgns [e-mail] wrote:

To clarify, it's not true autoplay- simply the ability for my custom
button to play the video without pressing the vimeo play button. This
wasn't working because of the prohibition of autoplay on mobile, but the
RevSlider has a setting "No Poster On Mobile" in the Vimeo layer which
allows the Vim. Play to be triggered.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vimeo/player.js/issues/199#issuecomment-377590919,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AkLnRJr2wcya1LQ-keX04-eygEFyxXi7ks5tjnnUgaJpZM4RjRzR
.

[AdrianMrn]

@smithsmithsmithsmith I managed to get it working like this:
HTML:

<div id="videoblock"></div>

JavaScript:

var options = {
    id: [vimeo-video-id],
    muted: true,
    background: true,
    loop: true,
};
var homeplayer = new Vimeo.Player("videoblock", options);

[pat-sullivan]

@AdrianMrn doesn't seem to work for me, testing on iPhone6 latest iOS. Might just resort to taking a chunk out of our server's bandwidth and uploading the video there in a video wrapper.

[ar9jun]

I ran into this issue as well, and not sure if this helps anyone else - but with my player - which has autoplay, background and loop set to true - I ran .setCurrentTime(0) and it played on document ready!

[gary0033]

Confused. Did you append .setCurrentTime(0)to the end of the link to your music? If not, where did you put this command?

From: Arjun Srivastava
Sent: Monday, April 30, 2018 1:09 PM
To: vimeo/player.js
Cc: gary0033 ; Mention
Subject: Re: [vimeo/player.js] Vimeo player autoplay feature does not work on mobile devices (#199)

I ran into this issue as well, and not sure if this helps anyone else - but with my player - which has autoplay, background and loop set to true - I ran .setCurrentTime(0) and it played on document ready!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ar9jun]

@gary0033 So use the Vimeo.Player constructor to create an instance of your player (you can see how in the Getting Started section of the ReadMe and on the player instance (let's say you called it musicPlayer), you would runmusicPlayer.setCurrentTime(0);`.

In my case, I'm using jQuery, so I do the following:

var musicVideoIframe = document.querySelector('#music-video');
var musicPlayer = new Vimeo.Player(musicVideoIframe);

$(document).ready(function() {
    musicPlayer.setCurrentTime(0);
});

Check out the ReadMe to figure out how to create an instance for your needs.

[gary0033]

Some of this is over my head so I’m going to get some technical help.

Are you saying that when you use the code .setCurrentTime(0) that the Vimeo player will auto play on an iphone?

Thanks.

From: Arjun Srivastava
Sent: Monday, April 30, 2018 2:02 PM
To: vimeo/player.js
Cc: gary0033 ; Mention
Subject: Re: [vimeo/player.js] Vimeo player autoplay feature does not work on mobile devices (#199)

@gary0033 So use the Vimeo.Player constructor to create an instance of your player (you can see how in the Getting Started section of the ReadMe and on the player instance (let's say you called it musicPlayer), you would runmusicPlayer.setCurrentTime(0);`.

In my case, I'm using jQuery, so I do the following:

var musicVideoIframe = document.querySelector('#music-video');
var musicPlayer = new Vimeo.Player(musicVideoIframe);

$(document).ready(function() {
musicPlayer.setCurrentTime(0);
});
Check out the ReadMe to figure out how to create an instance for your needs.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[linuxbastard]

Has there been any progress on this?
I'm currently on a plus plan and have a video embedded with background and mute set to 1, but still does not autoplay on mobile.

[fisherinnovation]

@linuxbastard What OS and browser are you encountering your autoplay issues with?

[linuxbastard]

So far chrome browser on android, and chrome and safari on iOS

[fisherinnovation]

@linuxbastard the muted param shouldn't be required on embeds where the background is set as that is done by default when setting background=1. When testing https://player.vimeo.com/video/76979871?background=1 directly, are you still able to replicate your issue? If so, can you please provide the version of the browser you are testing with?

[linuxbastard]

I only had background=1 before, but that didn't work so I tested with the muted=1 parameter as well. Same thing. I have Chrome 66.0.3359.158 on Android 7.1.1. Users I tested it with were on iOS on iPhone X and iPhone 8. I can't check what browser and version they were using tho, I was only informed of the autoplay not working.

[TheRealMikeD]

Hi All,

FWIW, I seem to have found a workaround that worked for me. Thought I would share in case it helps someone else.

For me, the magic ingredient was pre-loading the videos using the Vimeo API (https://github.com/vimeo/player.js#loadvideoid-number-promisenumber-typeerrorpassworderrorerror). Inside of a jQuery document.ready handler, I instantiate a Vimeo.Player object, then call its loadVideo() method on the existing embed iframe, using the same video ID that is already in the embed (might work with other id's and/or loading new embeds via code also, but I didn't try that).

Now, in my case, I didn't want to play the video(s) right away, but rather when a user clicked a button, I wanted them to pop up and play at full screen, which they would not do until I found this solution. If you are looking to have the video play immediately when the page loads, you might try calling the Vimeo Player's play() method in the promise handler for the loadVideo() method.

Here's a simplified version of my code:

$(document).ready(function() {
    // Get reference to the video's existing embed iframe.
    var elmVid = document.getElementById('my-video-iframe'); // or use jQuery here if you prefer
    var plyr = new Vimeo.Player(elmVid);
    // I am assuming you know the Vimeo numeric ID of the video.
    // If not, you could write your own code to parse it out of the iframe's src attribute.
    // In my case, I used the ID of the same video that was already in the embed iframe referenced by elmVid.
    var videoID = '123456789';
    plyr.loadVideo(videoID).then(function(id){
        // Once you get here, the video should be loaded and ready to play.
        // Take whatever action is appropriate for your application.
        // In my case, once I call the Vimeo.Player's play() method any time after this, the video plays full-screen like I wanted.
    });
});

There are a lot scenarios that I haven't tested, so I can't guarantee that this will work for everyone, but I hope that it helps some of you, or at least points you in a helpful direction.

[C4Framework]

I just tried the solution posted by @TheRealMikeD and this doesn't work for me on iOS Safari, Chrome, Firefox.

[TheRealMikeD]

@C4Framework, sorry to hear my workaround didn't help you.
FWIW, you can see it in action at https://blockdaemon.com/ (press the "See How It Works" button while browsing on iOS Chrome or Safari). The JS is not minified, so feel free to peruse through home-page.js, to see if it helps at all (although it's pretty much just a more elaborate implementation of what I illustrated in my previous comment).

Best of luck!

[harutyunyanvardan]

@TheRealMikeD your video doesn't start automatically on IOS devices.

[TheRealMikeD]

@harutyunyanvardan, sorry to hear that it's not working for you. I have found that it works somewhat intermittently. Most likely, this is due to a race condition of some sort, but I haven't tried to track it down. Maybe you can improve on it and share your fix.

[heyjonmanning]

For anyone trying to circumvent the autoplay restrictions, I don't recommend that you do.

Vimeo is acting in accordance with Google policies as well as browser/operating system policies and guidelines for how autoplay should work on mobile devices.

If you work around this and make videos autoplay when they shouldn't, then you may find yourself with repercussions in your Google ranking and no one wants to anger _The Google._ Your clients will understand and if they don't, then you're in much deeper trouble than autoplay 🤣

[TheRealMikeD]

@heyjonmanning, do you have a reference to the Google policies that you are referring to? It makes sense to follow those standards, but I would like to know what they are and fully understand them. Thanks!

[fisherinnovation]

@TheRealMikeD See https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

[TheRealMikeD]

Thanks, @fisherinnovation.

I don't know what situations others are facing. For myself, I have a website on which there is a "play video" button. The goal of the button's click handler is to launch a popup div that contains an iframe embed from Vimeo (it could also be from another service, like YouTube, in theory), and play the video. I feel like that should be an acceptable user experience since they have clicked the "play video" button. The code that I have written to try to get it to work was written because the video would not reliably play when the popup launched. I guess I'm now ranting a bit to fellow developers who have nothing to do with setting these policies (sorry). I respect the policy not to autoplay video that the user has not interacted with, but in this case, I just want the user to get the experience that they are expecting, which is for the video to play when they push the button. Is that so wrong?
</rant>

[fisherinnovation]

@TheRealMikeD Thanks for the feedback. By the sounds of your issue, you may not have connected the user gesture of clicking the play button to the actual request of playing the video. For the Player to know the play request came from user action, the event flow must be connected.

My recommendation given how you defined your setup would be to have the player loaded in the background, and ensure that clicking the Play button in your UI calls play on the Player and doesn't just load the player. Loading the player is a disconnect between the user gesture and the request to play the actual video. You could even reuse the same player instance for other videos by using the loadVideo method (https://github.com/vimeo/player.js#loadvideooptions-numberobject-promisenumberobject-typeerrorpassworderrorerror).