Question

当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(); 
}

Answer 1

您可以收听视频的'timeupdate'事件。然后在事件处理程序中，您将检查当前时间是什么，并在时间合适时启动动画。

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

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

注意1：我正在使用addEventListener作为示例，您应该依赖于您正在使用的库的相应方法，以实现最大的跨浏览器兼容性。

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

在HTML5视频期间启动JavaScript动画

1 个答案: