Froogaloop“完成”事件也觸發了“暫停”事件

Question

在頁面初始化腳本中，我具有以下代碼：

 var iframe = document.getElementById('video'); var player = Froogaloop(iframe); player.addEvent('ready', function() { player.addEvent('play', function() { console.log('Played video'); }); player.addEvent('pause', function() { console.log('Paused video'); }); player.addEvent('finish', function() { console.log('Finished video'); }); }); 

 <script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script> <iframe id="video" src="//player.vimeo.com/video/132283541?title=0&amp;byline=0&amp;portrait=0&amp;color=e00400&amp;api=1&amp;player_id=video" width="200" height="150" frameborder="0" crossorigin="anonymous" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 

視頻播放完后，我會收到一個暫停事件報告和一個完成事件報告。 有人知道為什么嗎？ 如果我的代碼沒有問題，是否有使用超時或類似方法的解決方法？

Answer 1

我將js代碼段更改如下：

var iframe = document.getElementById('video');
var player = Froogaloop(iframe);
player.addEvent('ready', function() {
    var pauseEvent = null;
    var finishEvent = null;
    player.addEvent('play', function() {
        console.log('Played video');
        pauseEvent = null;
        finishEvent = null;
    });
    player.addEvent('pause', function() {
        pauseEvent = setTimeout( function() {
            console.log('Paused video');
        }, 5);
        if (finishEvent) {
            clearTimeout(pauseEvent);
        }
    });
    player.addEvent('finish', function() {
        finishEvent = setTimeout( function() {
            console.log('Finished video');
        }, 5);
        if (pauseEvent) {
            clearTimeout(pauseEvent);
        };
    });
});

這行得通，盡管我認為可以看到它有點令人費解。 有兩個clearTimeout調用，因為我們無法確定報告“完成”和（虛假）“暫停”的順序是否與檢測到的順序相同。

雖然我希望這對其他人有幫助，但我敢肯定這並不是這個神秘問題的最終答案。