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

score 79 · Accepted Answer

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

由于我在 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

score 2 · Accepted Answer

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

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

结果是

TypeError: d[f] is undefined

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

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

score 1 · Accepted Answer

我认为您违反了同源政策。您会注意到，在您进行大量事件处理的地方，它们使用了特殊的 froogaloop API 调用。

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

javascript - Vimeo Froogaloop API 无法识别事件

5 回答 5

Related

Reference