Froogaloop Vimeo API -- Can't call API methods outside of Ready Event

Question

I've scoured the docs in SO and Vimeo and can't seem to figure out how to call an API method outside of the Ready Event in Vimeo. I have created my Vimeo player, embedding it into teacher.js:

    $(".video-player").prepend('<iframe id="player" src="//player.vimeo.com/video/'+video_id+'?api=1&player_id=player&badge=0&title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

    player = $('iframe#player')[0];
    vimeoSetup(player);

Which then calls vimeoSetup in a different script:

function vimeoSetup (player) {
$f(player).addEvent('ready', ready);

  function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
      element.addEventListener(eventName, callback, false);
    }
    else {
      element.attachEvent('on'+eventName, callback);
    }
  }

  function ready(player_id) {
    // Keep a reference to Froogaloop for this player
    container = document.getElementById(player_id).parentNode.parentNode;
    froogaloop = $f(player_id);    
    var buttons = container.querySelector('div#video-player-controls-holder-teacher div'),
    playBtn = document.querySelector('#play-pause');

   //play-pause -- I wanted to have a single play-pause button, which is working fine
    addEvent(playBtn, 'click', function() {
      froogaloop.api('paused', function(paused) {
        if(paused) {
            froogaloop.api('play');
        } else {
            froogaloop.api('pause');
        }
      });
    });
    ...

Now, if I want to say call $f(player).api('pause'); in teacher.js, I get this error: Unable to post message to http://player.vimeo.com. Recipient has origin mydomain. It seems like such a simple problem--I'm not sure if it involves usage of 'this' that is currently beyond me, or if I'm grabbing the Vimeo player embed incorrectly--I did get a lot of "no method .api for this object" in experimenting.

The end goal is that I can create a vimeo player, provide controls (both of these are good), and then use the API to call methods that feed into backbone, including pause, play, and time.

Are there other events, aside from 'click' and user-generated events I can use? Like an event that says another function was called? Seems circuitous...My backbone view looks like this:

    pause: function () {
     this.player.pauseVideo(); //this is for a YouTube API which works great
     //I want to be able to similarly call something like froogaloop.api('pause');
    },

Thanks so much--StackOverflow has taught me an amazing amount.

Oh it seems i did not noticed that you already was trying to call $f(player).api('pause'); and got unable to post, are you calling those after ready event fired? — Max Yari, Jan 21 '15 at 23:30
and for "no method .api for this object" as i said down below due to passing id in $f() second time instead of object by this id — Max Yari, Jan 21 '15 at 23:33

Max Yari · Answer 1 · 2015-01-21T23:40:31.970

So, if 'ready' event is working, then everything must be setup right. But here is one possible problem.
In:

player = $('iframe#player')[0];
vimeoSetup(player);

You are getting an Object by id 'player' and then, in vimeoSetup(player); passing an Object into $f(player) which is working.
Yet, further down the code in ready function you are passing in to $f(player_id) just an id, not an Object, therefore api calls not working.

You just need to get Object again by player_id and pass it into $f(), or save player = $('iframe#player')[0]; as global var and then call all API methods on it (though can be not a good option, if You want to make something like few dinamicly spawning players each one with own controls, or if You just one of those, who scared of global variables)

Froogaloop Vimeo API -- Can't call API methods outside of Ready Event

1 Answers1