我们已经为视频开始/播放/暂停/完成事件设置了事件跟踪。
我们有一种统一的方式来报告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中,我们可以区分搜索动作,因为缓冲区事件将始终首先触发。例如3
,2
以及播放器完成缓冲1
时。因此,我们忽略了任何暂停事件,这些事件紧随缓冲事件,而在缓冲区事件之后,无论经过的时间如何。这很好。
在Firefox中,事件的序列是非常不同的。在Firefox中,缓冲区事件正在落后。因此,我们获得了2
,1
,3
的顺序。如果视频已经在缓冲,我们将获得2
,3
,1
。
是否有另一种检测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
}