javascript - Youtube API 事件将暂停与搜索/缓冲区区分开来

Question

我们为视频开始/播放/暂停/完成事件设置了事件跟踪。

我们有统一的方式报告 HTML5、Youtube 和优酷视频的事件。对于 HTML5 和移动优酷视频，没有问题。对于桌面优酷(flash)，我们必须设置一个 setInterval投票检查视频处于什么状态，它不是很漂亮，但效果很好。

问题在于 Youtube 嵌入式视频。我们收听onStateChange事件:

player.addEventListener('onStateChange', function(e) {

    if(e.data === 0) {
        // Complete

    } else if(e.data === 1) {
        // Play

    } else if(e.data === 2) {
        // Pause
    }
}

但是当用户在视频播放时在视频中寻找，与时间线栏交互时，播放器将触发暂停播放和缓冲 ( e.data === 3) 事件。我们不想跟踪由寻找引起的暂停和播放。

在 chrome 中，我们可以区分 seek Action ，因为缓冲区事件总是首先触发。点赞 3 , 2当播放器完成缓冲 1 .因此，我们忽略任何紧跟在缓冲区事件之后的暂停事件，以及任何跟在缓冲区事件之后的播放事件，而不管经过了多少时间。这很好用。

然而，在 Firefox 中，事件的顺序非常不同。在 Firefox 中，缓冲区事件是尾随的。所以我们得到了订单 2 , 1 , 3 .如果视频已经在缓冲，我们会得到 2 , 3 , 1 .

是否有另一种检测 youtube 视频搜索事件的方法？还是一种捕捉序列的方法？

Answer 1

这就是我最终解决这个问题的方式。它将跟踪播放和暂停事件，但在用户搜索时不跟踪任何内容。据我所知，它在我测试过的浏览器中按预期工作。

var youtubeTrackingGate = youtubeTrackingGateFactory();

youtubePlayer.addEventListener('onStateChange', function(e) {
    if(e.data === -1 || e.data === 3) {

        youTubeTrackingGate({type: e.data});
    } else if(e.data === 1) {
        youTubeTrackingGate({type: e.data, event: 'PLAY'});
    } else if(e.data === 2) {
        youTubeTrackingGate({type: e.data, event: 'PAUSE'});
    }
});

function youtubeTrackingGateFactory () {
    var
        sequence = [],
        preventNextTracking = false,
        data,
        timeout;

    return function(obj) {

        // Chrome seek event
        if(util.compareArrays(sequence, [3]) && obj.type === 2) {
            preventNextTracking = true;

        // Prevent next play
        } else if(preventNextTracking && obj.type === 1) {
            preventNextTracking = false;

        } else {
            clearTimeout(timeout);

            // Save event
            sequence.push(obj.type);
            data = obj.event;

            timeout = setTimeout(function() {

                // Single event, let it pass if it's (play/pause)
                if(sequence.length === 1 && [1, 2].indexOf(sequence[0]) > -1) {

                    sendTracking(data);
                }

                sequence = [];
            }, 500);
        }

        // Suppress any (play/pause) after buffer event
        if(obj.type === 3) {

            // If not inital play
            if(!util.compareArrays(sequence, [-1, 3])) {
                preventNextTracking = true;

            // If is initial play
            } else {
                sequence = [];
            }
        }
    };
}


sendTracking(event) { 
    // code
}