Play vimeo onmouseover video and pause onmouseout

Question

I have a page containing several vimeo videos embedded in the standard iframe format. I have a link to froogaloop.js (http://a.vimeocdn.com/js/froogaloop2.min.js) in the HTML header as well as jquery (v 1.4.2). I want to do this in order to be able to play each video in onmouseover mode and pause onmouseout.

I created a JSFiddle page here: http://jsfiddle.net/g2Z2B/ that shows what I want to do - essentially just bind a play / pause video for jQuery onmouseover / onmouseout events - but no matter how much I read the documentation on API, I just can't get anything to work. I tried to split the API demo page here: http://player.vimeo.com/playground , but can't even get it to work with mouseover - plus whenever I try to cut out unnecessary material that it breaks. All I want to do is something very simple.

If anyone could point me in the right direction, I would be very grateful!

Answer 1

So, the first thing you need to capture a player is with the special $f Froogaloop selector. If you look at playground.html , this is done on line 223:

 froogaloop = $f(player_id) 

In addition, you should call .api('play') , not just ('play') . The full 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'); }); }); 

Fiddle fixed:

http://jsfiddle.net/g2Z2B/1/