Vimeo Froogaloop API 无法识别事件答案

【问题标题】：Vimeo Froogaloop API not recognizing an eventVimeo Froogaloop API 无法识别事件
【发布时间】：2011-06-30 15:42:47
【问题描述】：

我正在尝试使用 froogaloop API 识别 vimeo 的 onPlay、onPause 和 onFinish 事件。我已经用这个东西尝试了我能想象的一切，但没有运气。

我在 Firefox 上收到此错误：

在 Chrome 中：

从 CDN 导入 froogaloop：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

我的 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();
    }

})

我的 HTML：

<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe>

【问题讨论】：

标签： javascript jquery iframe vimeo froogaloop

【解决方案1】：

经过数小时的挫折……我找到了解决方案。

因为我在 iframe 上使用了 ID...显然 vimeo API 会强制您将参数添加到您正在获取的 URL (player_id=iframe-id)。

所以 iFrame 应该是这样的：

<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid" 
        width="623" height="350" frameborder="0"
        id="promo-vid">
</iframe>

特别感谢 Drew Baker 指出这一点：http://vimeo.com/forums/topic:38114#comment_5043696

【讨论】：

我在这里做了一个如何使用 Vimeo API 的例子：labs.funkhausdesign.com/examples/vimeo/…
我仍在努力完成“沮丧的时间”部分。当我按照给出的示例进行操作时，我得到的只是 javascript 安全策略违规。您是如何克服这些问题的？
似乎对我不起作用 - 如果我查看 Drew Baker 的示例或实施上面的答案，我仍然会遇到不安全的 javascript 错误 - 播放器可以工作，但错误不会消失。跨度>
这个解决方案对我不起作用。我找到了另一个解决方法：我正在播放视频，然后在视频准备好后立即暂停。这样，当用户再次尝试播放时，视频播放流畅。
有用的链接清楚地解释了 OP 的问题：labs.funkhausdesign.com/examples/vimeo/…

【解决方案2】：

使用 jQuery 选择 iframe 时创建播放器元素时出错。

var iframe = $('#player1');
var player = $f(iframe);

结果

TypeError: d[f] is undefined

我的解决方案是选择 jQuery ID 选择器中的第一个元素

var iframe = $('#player1')[0];
var player = $f(iframe);

【讨论】：

@Max 你得到答案了吗？
选择 jQuery 选择器内的 1. JS 对象，其后面带有 [0]，如我答案底部的声明...
我使用了它，但是，我得到了同样的错误！如果我尝试发出相同的警报，iframe 是未定义的。另外，使用 Player_id 和 api=1，
帮不了你，这对我有用......也许发布你的代码。问候

【解决方案3】：

我认为你违反了Same Origin Policy。您会注意到 here 在您进行大量事件处理的地方，他们使用的是特殊的 froogaloop API 调用。

我从未使用过 froogaloop，所以我可能错了。但这是我的猜测。这些错误似乎表明 iframe 正在尝试修改浏览器中的 URL，而现在 Same Origin 允许这样做。这就是 API 为您包装 window.postMessage 的原因。

【讨论】：

那我该怎么做才能解决这个问题？
更加坚持他们的模式。例如，看看他们的 SimpleButtons 示例；他们的 evenListener 回调都是对 froogaloop API 方法的调用。由于您要向尝试与浏览器交互的 froogaloop 对象添加事件侦听器，因此您必须通过它们的 API 来完成。此外，查看他们的 API，我没有看到为 froogaloop 对象定义的“addEvent”，只是一个 addEventListener。他们在包装 addEventListener 的示例代码中定义了自己的 addEvent。让我觉得使用与同源相关的内置 addEvent 存在问题。
我遇到了一些类似的问题。我的视频默认是隐藏的。我尝试先显示视频（通过 jQuery somediv.show();），然后直接调用：player.api('play');。这会导致非常奇怪的行为，视频不播放，或者在 30 秒左右后播放......最后，我刚刚创建了一个单独的函数（比如说 OnPlay），它只包含：player.api('play');。现在该行变为：somediv.show(0, OnPlay);这行得通！但为什么呢？

【解决方案4】：

我遇到了类似的问题，但在这种情况下，用 Vimeo.Player 替换 Froggaloop 后，它仍然是 chrome 中的一个新限制。我收到错误“播放（）失败，因为用户没有先与文档交互......”。经过进一步研究，Chrome 似乎添加了一些限制see here。我的解决方案是将allow="autoplay" 添加到 iframe。

【讨论】：

【解决方案5】：

Froggaloop2 也遇到过类似的问题 - 如果视频被缓存，ready 事件只会触发一次（在初始加载时）。解决方案是通过更改 src 来检索 iframe，如下所示：

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

【讨论】：