2016-12-20 8 views
2

動画の開始/再生/一時停止/完了イベントのイベントトラッキングを設定しました。Youtube APIイベントは、シーク/バッファからポーズを区別します。

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では、バッファイベントは後になります。だから我々は注文を受ける213。動画がすでにバッファリングされている場合は231となります。

YouTube動画のシークイベントを検出する別の方法はありますか?シーケンスをキャプチャする方法

+1

これらSO [29293877](http://stackoverflow.com/questions/29293877/how-to-listen-to-seek-event-in-youtube-embed-api)質問と[12676241]をチェック(http://stackoverflow.com/questions/12676241/detecting-a-play-event-in-youtube-api)それがあなたを助けることができるなら。 – KENdi

答えて

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 
} 
関連する問題