I have tried several examples from vimeo and other websites for getting a JavaScript event to fire when an iframe embed vimeo video stops playing.
Nothing I try seems to work!
Does anyone have the simplest possible version of a JavaScript onFinish event for an iframe vimeo player?
The example page is www.armourylondon.co.uk/work.php - clicking on a video thumb animates a div and then loads in the player with Ajax. I am using the prototype / Scriptaculous frameworks for the ajax and animations.
I have got the froogaloop js included and as I said, I have followed many examples from Stack Overflow, from vimeo's API examples and from other websites too but none work - at least not for me!
All I need is for someone to show a good old Hello World alert when a video has finished playing - I can do the rest from there! I have been sat here for three hours trying to get a simple alert to flash up but alas to no avail!
The Js that runs the thumbnail-to-vimeo animation and loadup is directly in the head of the document - the code inside the onComplete function for the ajax updater under the comment // Vimeo Auto close after finish is the last version I have tried that didn't work. I have been putting the code in there as the iframe doesn't exist in the Dom until the Ajax Updater has loaded the video into the div that grew when the thumbnail was clicked.
I used this code in the end - got it working at about 9am this morning!
$f($('armoury_vid')).addEvent('ready', ready);
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode;
froogaloop = $f(player_id);
froogaloop.addEvent('finish', function(data) {
document.body.removeChild($('armoury_vid').parentNode);
});
}
I placed the code into the onComplete callback for the Ajax.Updater call thats loads the vimeo video into the page.
I believe that it was because I was not wrapping the $(prototypecall) in the Froogaloops $f() function - mistake noted!
The above script was built using the Prototype framework - It would take very little work to adapt it to use the jQuery framework - its down to personal preference - they both do the same, just slightly different syntax!