Vimeo API not detecting play event

Question

I'm trying to detect a click of the play button using hte vimeo js api. Here is my code:

html:

<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

and the JS:

        var iframe = document.getElementById('video');
        var player = $f(iframe);

        player.on('play', function() {
            console.log('played the video!');
        });

At the moment i'm not getting anything logged in the console. I do have another function using the Vimeo API later down in the DOM which seems to be working fine:

        jQuery("body").on("click",".watch-vid-cta",function(){
              player.api("play");
        });

I got the code straight form their API so not sure what I could be doing wrong:

https://github.com/vimeo/player.js

Answer 1

It seems that there are two issues here.

First : vimeo has released it's new api (2016) recently, and it's not compatible with the former one. The code you provided is a mix of the two api, player.api("play") is the old syntax, while the new synax is player.play(). As you second function is working, I would assume that you're using the old api (known as froogaloops). The github page of vimeo contains all the explanation you may nedd to migrate and it's super easy.

Second : within the new api, it seems that you mixed the event listener player.on('play', function() {} whitch do something when the player is played and the play() method, use to play the player.

With the new api your code might look like this :

html :

<button type="button" id="playButton">Play</button>

then you need to include the api in your page

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

and finally your js :

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

function vimeoPlay(){
    player.play().then(function(){
    })
    .catch(function(error) {
        switch (error.name) {
            case 'PasswordError':
                break;
            case 'PrivacyError':
                break;
            default:
                break;
        }
    });
}

document.getElementById("playButton").onclick = function (){vimeoPlay()}

Here the player.play() method has a promise .then(function{}), this enable you to do something once the player is played, and thus only once every time you call the vimeoPlay function, by clicking on the button in this case.

Hope this helps

EDIT :

regarding your comment, I belive that you are facing the first issue.

If your second function, which contains player.api("play") works, it probably means that you are using the old api (froogaloops) as with the new api (2016) it would be player.play().

If so, you can't expect player.on('play', function() {console.log('played the video!');}); to work as it is the syntax of the new api.

You should double check which version of the api you are using, the link to the old and the new ones are respectively :

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
    //versus
<script src="https://player.vimeo.com/api/player.js"></script>

If your wish is indeed to listen to a play event then you may try this with the new api

<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript">
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
    console.log('played the video!');
});
</script>

---

I highligh your attention toward the difference between the way you embed the video and the way I do, you shouldn't add ?api=1 with the new api :

<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1"></iframe>
    //versus
<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe>

and toward the difference between the way you set your variables and I do:

var iframe = document.getElementById('video');
var player = $f(iframe);
    //versus
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

If you have multiple vimeo video on the same page you may of couses attribute an id to your vimeo iframes, for instance vimeoPlayer1 and vimeoPlayer2 and write

<iframe id="vimeoPlayer1" src="https://player.vimeo.com/video/21777784"></iframe>
<iframe id="vimeoPlayer2" src="https://player.vimeo.com/video/21777784"></iframe>

var vPlayer1 = document.getElementById("vimeoPlayer1");
var player1 = new Vimeo.Player(vPlayer1)

var vPlayer2 = document.getElementById("vimeoPlayer2");
var player2 = new Vimeo.Player(vPlayer2)

---

Finally you may upgrade you second function by replacing player.api("play") by player.play() (but I'm not confortable with jQuery if there is something else going on here):