Javascript Youtube API事件区分暂停和查找/缓冲区
我们已经为视频开始/播放/暂停/完成事件设置了事件跟踪 我们有一个统一的方式来报告HTML5、Youtube和优酷视频的事件。HTML5和移动优酷视频没有问题。对于桌面优酷(flash),我们必须设置一个Javascript Youtube API事件区分暂停和查找/缓冲区,javascript,youtube-api,youtube-analytics,Javascript,Youtube Api,Youtube Analytics,我们已经为视频开始/播放/暂停/完成事件设置了事件跟踪 我们有一个统一的方式来报告HTML5、Youtube和优酷视频的事件。HTML5和移动优酷视频没有问题。对于桌面优酷(flash),我们必须设置一个setIntervalpoll来检查视频的状态,虽然不好看,但效果很好 问题在于Youtube的嵌入式视频。我们收听onStateChange事件: player.addEventListener('onStateChange', function(e) { if(e.data ===
setInterval
poll来检查视频的状态,虽然不好看,但效果很好
问题在于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视频的seek事件?还是一种捕获序列的方法?这就是我最终解决这个问题的原因。它将跟踪播放和暂停事件,但不会在用户搜索时跟踪任何内容。据我所知,在我测试过的浏览器中,它可以像预期的那样工作
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
}
检查这些问题,如果它能帮助你。