javascript - Froogaloop 'finish' 事件也触发了 'pause' 事件

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调用，因为我们无法确定报告“完成”和(虚假)“暂停”的顺序是否与检测到它们的顺序相同。

虽然我希望这对其他人有帮助，但我确信这并不是这个神秘问题的最终结论。