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>

score 79 · Accepted Answer · edited Oct 14 '15 at 07:13

79

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

edited Oct 14 '15 at 07:13

Ярослав Рахматуллин

7,599
1
41
60

answered Jun 30 '11 at 16:12

criticerz

3,397
3
23
24

5

I made an example of how to use the Vimeo API here: http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html – Drew Baker Aug 18 '11 at 10:42
I'm still slogging through the 'hours of frustration' part. When I follow the examples given all I get are javascript security policy violations. How did you overcome these? – RSG Oct 05 '11 at 18:11
doesn't seem to work for me - if I look at Drew Baker's example or implement the answer above I still get unsafe javascript errors - the player works, but the errors do not go away. – mheavers Dec 08 '11 at 15:00
This solution didn't work for me. I've found another fix for this: I'm playing the video and then pausing it as soon as the video is ready. This way, when the user tries to play it again, the video plays smoothly. – Elad Ziv Dec 22 '14 at 08:13
Useful link which clearly explains the OP 's question: http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html – Simon Mar 01 '15 at 11:23

score 2 · Answer 2 · answered Jul 19 '15 at 19:59

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);

answered Jul 19 '15 at 19:59

Maximilian Köhler

401
4
11

Did you get the answer @Max? – malhar May 03 '16 at 20:21
Select the 1. JS object that is inside the jQuery selector with a [0] behind it, as statet at the bottom of my answer... – Maximilian Köhler May 03 '16 at 20:34
I used it, however, I am getting the same error! iframe is undefined if I try to alert the same. Also, using Player_id ,and api=1, – malhar May 03 '16 at 20:37
Can't help you, this worked for me... maybe post your code. greetings – Maximilian Köhler May 03 '16 at 20:57

score 1 · Answer 3 · answered Mar 21 '19 at 20:43

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.

score 1 · Answer 4 · answered Jun 30 '11 at 15:49

1

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.

answered Jun 30 '11 at 15:49

Doug Stephen

7,181
1
38
46

What can I do to fix this then? – criticerz Jun 30 '11 at 15:54
Adhere more to their pattern. For example, look at their SimpleButtons example; their evenListener callbacks are all calls to froogaloop API methods. Since you're adding an event listener to the froogaloop object that is trying to interact with your browser, you have to do it through their API. Also, looking at their API, I don't see an "addEvent" defined for a froogaloop object, just an addEventListener. They define their own addEvent in their example code that wraps addEventListener. Makes me think that there's a problem with using built-in addEvent related to Same Origin. – Doug Stephen Jun 30 '11 at 16:24
I had some similar problem. My video is hidden by default. I tried to show the video first (via jQuery ```somediv.show();``` ), and directly after this, I tried to call the: ```player.api('play');``` . This results in really strange behavior, where the video doesn't play, or play after 30 seconds or so... At the end, I just created a separate function (let's say OnPlay), which only contains: ```player.api('play');```. Now the line becomes : ```somediv.show(0, OnPlay)```; This works! But Why? – Melroy van den Berg Jan 20 '15 at 12:05

score 0 · Answer 5 · answered Jun 23 '15 at 12:29

Having had a similar issue, with Froggaloop2 - it appears that if the video is cached, the ready event will fire only once (on the initial load). The solution is to retrieve the iframe with changing src, as:

$(iframe).attr('src', $(iframe).attr('src') + '#timestamp='+(new Date()).getTime());

Vimeo Froogaloop API not recognizing an event

5 Answers5

Linked