Vimeo Froogaloop API无法识别事件

Question

我正在尝试使用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>

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，现在Same Source允许这样做。 这就是为什么API为你包装window.postMessage的原因。

Answer 4

有一个类似的问题，使用Froggaloop2 - 似乎如果视频被缓存，就绪事件将仅触发一次（在初始加载时）。 解决方案是通过更改src来检索iframe，如下所示：

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

Answer 5

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