javascriptjqueryiframevimeofroogaloop

Vimeo Froogaloop API not recognizing an event


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:

Permission denied for <code><http://player.vimeo.com></code> to get pet property Location.toString

And in Chrome:

Unsafe javascript attempt to access frame with URL ... from frame with URL `http://player.vimeo.com/video/3718294?api=1. Domains, protocols and ports must match.

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>

Solution

  • 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