YouTube API事件将暂停与Seek/Buffer区分开



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

我们有一种统一的方式来报告HTML5,YouTube和Youku视频的事件。对于HTML5和Mobile Youku视频,没有问题。对于桌面youku(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中,我们可以区分搜索动作,因为缓冲区事件将始终首先触发。例如32以及播放器完成缓冲1时。因此,我们忽略了任何暂停事件,这些事件紧随缓冲事件,而在缓冲区事件之后,无论经过的时间如何。这很好。

在Firefox中,事件的序列是非常不同的。在Firefox中,缓冲区事件正在落后。因此,我们获得了213的顺序。如果视频已经在缓冲,我们将获得231

是否有另一种检测YouTube视频的搜索活动的方法?或一种捕获序列的方法?

这就是我最终解决此问题的方式。它将跟踪游戏和暂停事件,但在用户寻求时不会跟踪任何内容。据我所知,它在我测试过的浏览器中正常工作。

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
}

相关内容

  • 没有找到相关文章

最新更新