在HTML5视频中启动JavaScript动画

当HTML5背景视频到达特定点时，我想要我的动画。现在一旦视频结束，它就开始了。有一种方法可以查找视频的进度，并在视频达到某个特定点时开始播放动画？这是我的代码。在HTML5视频中启动JavaScript动画

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

来源

2012-12-01 user1839872

您可以听视频的'timeupdate'事件。然后在事件处理程序中，您将检查当前时间，并在时间正确时开始动画。

例如，如果变量v是参考你的球员，我可以在当前时间日志这种方式到控制台：

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

注1：我使用的addEventListener只是作为一个例子 ，您应该依赖您正在使用的库的相应方法，以获得最大的跨浏览器兼容性。注意2：返回给你的时间不是一个精确的整数。您可以检查当前时间是否大于某个阈值，执行您的操作，然后断开处理程序，或将alreadyPlayedAnimation状态保存在某个变量中。

来源

2012-12-01 19:55:36 4lbertoC

在HTML5视频中启动JavaScript动画

回答

相关问题