YouTube API 이벤트가 일시 중지를 탐색/버퍼와 구별합니다.

Question

동영상 시작/재생/일시 정지/완료 이벤트에 대한 이벤트 추적을 설정했습니다.

HTML5, Youtube 및 Youku 비디오에 대한 이벤트를 통일 된 방식으로보고합니다. HTML5 및 모바일 Youku 비디오의 경우 아무런 문제가 없습니다. 데스크톱 Youku (플래시)의 경우 비디오가 어떤 상태인지 확인하기 위해 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) 이벤트를 트리거합니다. 우리는 탐색으로 인한 멈춤과 놀음을 추적하고 싶지 않습니다.

크롬에서는 버퍼 이벤트가 항상 첫 번째로 트리거되므로 찾기 작업을 구별 할 수 있습니다. 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 
}