Vimeo Froogaloop API not recognizing an event

Question

I'm trying to recognize the onPlay, onPause, and onFinish event for vimeo using the froogaloop API. I've tried everything I could imagine with this thing, and no luck.

I get this error on Firefox:

And in Chrome:

Importing froogaloop from the CDN:

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

My JS:

$(function(){

    var vimeoPlayer = document.querySelector('iframe');

    $f(vimeoPlayer).addEvent('ready', ready);

    function ready(player_id) {

        froogaloop = $f(player_id);

        function setupEventListeners() {
            function onPlay() {
                froogaloop.addEvent('play',
                function(data) {
                    console.log('play event');
                });
            }

            function onPause() {

                froogaloop.addEvent('pause',
                function(data) {
                    console.log('pause event');
                });
            }

            function onFinish() {
                froogaloop.addEvent('finish',
                function(data) {
                    console.log('finish');
                });
            }
            onPlay();
            onPause();
            onFinish();
        }
        setupEventListeners();
    }

})

My HTML:

<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe>

Answer 1

After hours and hours of frustration... I have found the solution.

Since I was using an ID on the iframe... apparently the vimeo API forces you to add the parameter to the URL you are fetching (player_id=iframe-id).

So the iFrame should look like this:

<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid" 
        width="623" height="350" frameborder="0"
        id="promo-vid">
</iframe>

Special thanks to Drew Baker for pointing this out: http://vimeo.com/forums/topic:38114#comment_5043696

Answer 2

Got an error creating the player element when selecting the iframe with jQuery.

var iframe = $('#player1');
var player = $f(iframe);

Results in

TypeError: d[f] is undefined

Solution for me was to select the first element in the jQuery ID selector

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

Answer 3

I think you're violating the Same Origin Policy. You'll notice here that where you're doing a lot of event handling, they are using special froogaloop API calls.

I've never used froogaloop so I'm probably wrong. But that's my guess. The errors seem to suggest that the iframe is attempting to modify the URL in your browser, and that's now allowed by Same Origin. That's why the API wraps up window.postMessage for you.