javascript - Froogaloop Vimeo API——无法在就绪事件之外调用 API 方法

Question

我已经搜索了 SO 和 Vimeo 中的文档，但似乎无法弄清楚如何在 Vimeo 中的就绪事件之外调用 API 方法。我已经创建了我的 Vimeo 播放器，并将其嵌入到 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);

然后在不同的脚本中调用 vimeoSetup:

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');
        }
      });
    });
    ...

现在，如果我想说调用 $f(player).api('pause');在 teacher.js 中，我收到此错误:无法将消息发布到 http://player.vimeo.com .收件人有 origin mydomain。这似乎是一个如此简单的问题——我不确定它是否涉及目前我无法理解的“this”的使用，或者我是否错误地捕获了嵌入的 Vimeo 播放器——我确实得到了很多“没有方法” .api for this object”在实验中。

最终目标是我可以创建一个 vimeo 播放器，提供控件(这两个都很好)，然后使用 API 调用提供给主干的方法，包括暂停、播放和时间。

除了“点击”和我可以使用的用户生成的事件之外，还有其他事件吗？就像一个说另一个函数被调用的事件？似乎迂回......我的 Backbone 观点是这样的:

    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');
    },

非常感谢——StackOverflow 教会了我很多东西。

Answer 1

因此，如果 'ready' 事件正常运行，那么一切都必须正确设置。但这里有一个可能的问题。
在:

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

您通过 id 'player' 获得一个 Object，然后在 vimeoSetup(player); 中传递一个 Object 进入正在运行的 $f(player)。
然而，在 ready 函数中的代码下方，您传递给 $f(player_id) 的只是一个 id，而不是一个 Object ，因此 api 调用不起作用。

你只需要通过player_id再次获取Object并传入$f()，或者保存player = $ ('iframe#player')[0]; 作为全局 var 然后在其上调用所有 API 方法(虽然这可能不是一个好的选择，如果你想做一些像 few动态生成玩家，每个玩家都有自己的控制，或者如果你只是其中之一，害怕全局变量)