Vimeo Froogaloop API not recognizing an event

Viewed 22748

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>
5 Answers

I had a similar issue, but in this case after replacing Froggaloop with the Vimeo.Player, it still it was a new restriction in chrome. I was getting the error "play() failed because the user didn't interact with the document first...". After further research it looks like Chrome added some restrictions see here. The solution in my case was to add allow="autoplay" to the iframe.

Related