Play vimeo video onmouseover and pause onmouseout

Question

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!

score 9 · Accepted Answer · answered Nov 14 '11 at 17:34

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:

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

Play vimeo video onmouseover and pause onmouseout

1 Answers1