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。