javascriptvideovimeoautoplay

Vimeo javascript api player.play() not playing


This odd behaviour seems to have started in the last week or so.

The following html/javascript combo should load a Vimeo video, and then when the user presses play, it should load and play a different video. It is useful if you want to play a pre-roll before a main video.

If you test it on a desktop browser (I've tried Safari, Chrome and Firefox) it loads the second video, then pauses it. Stranger still, it sometimes works the first time, then the issue arises if you reload the page and try again.

Would appreciate any thoughts on how to solve this.

<iframe allowfullscreen="" scrolling="no" src="https://player.vimeo.com/video/258684937" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function(){
    player.off('play')
    player.loadVideo(76979871).then(function(){
        player.setAutopause(false).then(function(autopause) {
            player.play();
       });
    });
});
</script>

Solution

  • A simple fix is to delay the player.play() call...

    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    
    player.on('play', function(){
        player.off('play')
        player.loadVideo(76979871).then(function(){
            player.setAutopause(false).then(function(autopause) {
              // wait 1 second then play  
              setTimeout(play2,1000);
           });
        });
    });
    function play2(){
      player.play();
    }