0

HTML5 バックグラウンド ビデオが特定のポイントに達したときにアニメーションが必要です。現在、ビデオが終了すると開始されます。ビデオの進行状況を見つけて、ビデオが特定のポイントに達したらアニメーションを開始する方法はありますか? これが私のコードです。

// Browser Window Size and Position 
function animCD_pageWidth() { return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;}  

function animCD_pageHeight() {return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;} 



// Add the canvas to the DOM object and kick off our animation sequnce 
function animCD_start() 
{        



    if (animCD_loaded) return; 

    // - Add them to the document (done here since it needs to be done after the DOM object is loaded 
    document.body.appendChild(animCD_cBack);     
    document.body.appendChild(animCD_cDisk); 
    document.body.appendChild(animCD_cMidd); 
    document.body.appendChild(animCD_cFore); 
    document.body.appendChild(animCD_cBuff); 
    document.body.appendChild(animCD_cBuf2); 

    animCD_loaded = true; 

    // - Start animating 
    animCD_Loop(); 
}
4

1 に答える 1

0

ビデオの「timeupdate」イベントを聞くことができます。次に、イベント ハンドラーで現在の時刻を確認し、時刻が正しければアニメーションを開始します。

たとえば、変数vがプレーヤーへの参照である場合、この方法で現在の時刻をコンソールに記録できます。

v.addEventListener('timeupdate',
  function(evt) 
  {
    // Your code here
    console.log(evt.target.currentTime);
  });

注 1: 例として addEventListener を使用しています。クロスブラウザーの互換性を最大限に高めるには、使用しているライブラリの対応するメソッドに依存する必要があります。

注 2: 返される時刻は正確な整数ではないことに注意してください。現在の時間が特定のしきい値よりも大きいことを確認し、何かを行ってからハンドラーを切断するか、変数のどこかに alreadyPlayedAnimation 状態を保存することができます。

于 2012-12-01T19:55:36.970 に答える