Fire event when vimeo video stops playing?

Question

I was just wondering if it was possible to fire an event once a vimeo video has finished playing?

Currently I have a Vimeo embed in an overlay, that I want to remove once the video has stopped. Hope this makes sense!

I dont really have any code that would be of use, but would like to know if you can add event listeners to the video, fire an event once the video has finished, and how you would go about doing this?

Thanks Ryan

Solution 1

Previous answer is now obsolete since Vimeo launching the new Video Player API.

Important: Be sure to remove the ?api=1 from the URL in your iframe. This was previously required when using the Froogaloop library and is no longer needed. If you leave it in, the 'ended', 'seeked' and other events will never fire.

Include the new script:

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

And then use the following example:

$(document).ready(function(){

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

    player.on('ended', function() {
        console.log('Finished.');
    });

});

Solution 2

Firstly you need to include the path to Vimeo's 'Frogaloop library, in your HTML (after your Jquery include):

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

Then you need to embed your Vimeo video (again in your HTML):

<iframe id="PLAYER1" src="https://player.vimeo.com/video/76979871?api=1&player_id=PLAYER1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Here 'api=1' turns on the api - this is turned off by default for performance. And, player_id='PLAYER1' is the id of your iframe.

Then in your JavaScript file, you need the following:

$(function() {

    //Gets the iframe by id
    var iframe = $('#PLAYER1');
    //Creates a player var using the iframe
    var player = $f(iframe);

    // When the player is ready/loaded, add a finish event listener
    player.addEvent('ready', function() {
        //Adds an event 'finish' that executes a function 'onFinish' when the video has ended.
        player.addEvent('finish', onFinish);
    });

    //Define the onFinish function that will be called
    function onFinish(id) {
        console.log('THE VIDEO HAS FINISHED PLAYING');
    }

});

Then simply just play the video, and check the console output.

Here is a link to the appropriate part of the documentation.

Thanks to @Raptor for pointing me towards the api docs.

Solution 3

http://developer.vimeo.com/player/js-api

Check this page out, especially the event listner part. I'm sure i could write some code on it aswell, if you need any more help?