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

您可以收听视频的“时间更新”事件。然后在事件处理程序中，您将检查当前时间，如果时间合适，则启动动画。

例如，如果变量v是对您的播放器的引用，我可以通过这种方式将当前时间记录到控制台：

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

注意1：我以addEventListener为例，你应该依赖你正在使用的库的相应方法，以获得最大的跨浏览器兼容性。

注意2：请注意，返回给您的时间不是精确的整数。您可以检查当前时间是否大于某个阈值，执行您的操作然后断开处理程序，或者将 alreadyPlayedAnimation 状态保存在变量中的某个位置。

于 2012-12-01T19:55:36.970 回答