Fire event when vimeo video stops playing? Fire event when vimeo video stops playing? jquery jquery

Fire event when vimeo video stops playing?


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.');    });});


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.


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?