在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動畫

回答

相關問題