CODEWITHSUNDEEP
javascriptapiiframevideovimeo
Can Goktas
Can Goktas

Reputation: 117

Vimeo player doesn't get "finish" event

I have a very basic JS that works when the vimeo iframe finishes the video. Take a look at the fiddle: http://jsfiddle.net/vy9kf0w5/1/

How can I target the finish of the video with JS? It looks like it should work :p

document.getElementById('video').api_addEventListener('finish', function(event) {
    alert('video has ended');
    console.log('video has ended');
   $('#video').addClass('finished');
});

Upvotes: 2

Views: 4328

Answers (1)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Here you are a working example http://jsfiddle.net/vy9kf0w5/3/

You need to include Vimeo's Froogaloop script in your page in order to get events from Vimeo videos. Then it is very simple, on their supported events just do what you want :) The only other thing you need to do is to add ?api=1&player_id=video to the url :)

iframe

<iframe src="//player.vimeo.com/video/55874553?api=1&player_id=video&title=0&amp;byline=0&amp;portrait=0&amp;color=c9ff23;autoplay=1" width="720" height="405"  id="video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>

The CODE

var iframe = $('#video')[0],
    player = $f(iframe);

player.addEvent('ready', function() {       
        player.addEvent('finish', onFinish);
    });

function onFinish(id) {
    alert('video has ended');
    console.log('video has ended');
    $('#vimeoembed').addClass('finished');
}

Read more about Vimeos javaScript API here

Upvotes: 3

Related Questions