I have a page which contains several vimeo videos, embedded in the standard iframe way. I have a reference to froogaloop.js (http://a.vimeocdn.com/js/froogaloop2.min.js) in the HTML head and also jquery (v 1.4.2). What I want to do is to be able to play each video onmouseover and pause onmouseout.
I've set up a JSFiddle page here: http://jsfiddle.net/g2Z2B/ which shows what I'm wanting to do - essentially just bind the video play/pause to the jquery onmouseover/onmouseout events - but no matter how much I read through the API documentation I just can't get anything to work. I've tried pulling apart the API demo page here: http://player.vimeo.com/playground but can't even get that to work on mouseover - plus whenever I try to strip out the unwanted stuff it breaks too. All I'm looking to do is something mega-simple.
If anyone could point me in the right direction here I'd be most grateful!
So the first thing is that you should be grabbing the player with Froogaloop's custom $f selector. If you look at playground.html this is done on line 223:
froogaloop = $f(player_id)
Additionally, you should be calling .api('play') rather than just ('play'). Complete code might look something like this:
$(document).ready(function(){
var player = $("#player_7256322");
froogaloop = $f(player[0].id);
player.mouseover(function(){
froogaloop.api('play');
}).mouseout(function(){
froogaloop.api('pause');
});
});
Fixed fiddle: