我们已为视频开始/播放/暂停/完成事件设置了事件跟踪。
我们有统一的方式报告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中,我们可以区分搜索操作,因为缓冲区事件将始终首先触发。与3
,2
一样,当玩家完成缓冲1
时。因此,我们忽略紧跟缓冲区事件的任何暂停事件,以及缓冲区事件之后的任何播放事件,而不管时间是否过去。这很有效。
在firefox中,事件的顺序却截然不同。在firefox中,缓冲区事件正在跟踪。我们得到订单2
,1
,3
。如果视频已缓存,我们会获得2
,3
,1
。
是否有其他方法可以检测YouTube视频的搜索事件?还是一种捕获序列的方法?
答案 0 :(得分:0)
这就是我最终解决这个问题的方法。它将跟踪播放和暂停事件,但不会在用户搜索时跟踪任何内容。据我所知,它已经在我测试的浏览器中按预期工作。
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
}