Detect if Vimeo video will autoplay

Question

I am working with Vimeo and their autoplay feature. The issue is that autoplay won't work on mobile devices and I have some timers that assume the video did autoplay. I know an event is fired when the video plays, but I can seem to find anything on how to tell if autoplay is working. Is there a way to tell if autoplay is working programaticly. What I would want to do is something like this..

Does autoplay work on this device or did autoplay fire? If not forget the timers and show all content now.

Ary Pablo Batista · Answer 1 · 2020-02-27T11:20:15.227

As you say, Vimeo Player's autoplay feature is not working on mobile devices (this is informed in this article) and also the JavaScript API seems to be broken on those devices. You can still use Vimeo's Player JavaScript API to manipulate videos on non-mobile devices and to infer whether mobile devices support JavaScript API.

Determining if autoplay worked on non-mobile devices:

To check if autoplay has started on those devices were vimeo player works you could use the play event in combination with player.getPaused() on page ready.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>
  </head>
<body>
  
  <iframe id="player" src="https://player.vimeo.com/video/78716964?autoplay=1&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  
  
  <script>
    var player = new Vimeo.Player($('#player'));
    
    var state = { autoplaying : false };
    
    player.on('play', () => {
      state.autoplaying = true;
      player.off('play');
    });
    
    player.getPaused().then((paused) => {
      var playing = !paused;
      state.autoplaying = state.autoplaying || playing;
    });
  </script>
</body>
</html>

Determining if autoplay worked on mobile devices:

Right now there is no clear way to determine this on mobile devices since JavaScript API is broken. You could try to detect whether JavaScript API is enabled or not by calling any API method and wait for the promise result. If result didn't come in a short period of time, then you can say that API is not working. So, just let's say autoplay didn't work.

var player = new Vimeo.Player($('#player'));

var state = { 
  autoplaying : false,
  apiEnabled : null
};

player.on('play', () => {
  state.autoplaying = true;
  player.off('play');
});
                  
setTimeout(() => {
  if (state.apiEnabled === null) {
    state.apiEnabled = false;  
    // Do something 
  }
}, 100);
                
player.getPaused().then((paused) => {
  state.apiEnabled = true;
  // Do something
});

You could also use some technic like detecting user agent to determine if you are in a mobile device and therefore assume autoplay didn't execute.

I recommend you not to hack into Vimeo's iframe to determine autoplay state. Public APIs should be the way to go in order to ensure your script will work in the future.

Detect if Vimeo video will autoplay

1 Answers1