Vimeo Froogaloop API 无法识别事件

Question

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

我在 Firefox 上收到此错误：

在 Chrome 中：

从CDN：

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

Answer 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

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

Answer 3

我认为您违反了同源政策。您会注意到此处您正在做的事情很多事件处理，他们使用特殊的 froogaloop API 调用。

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

Answer 4

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

Answer 5

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

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