Start JavaScript Animation During HTML5 Video

Question

I want my animation when the HTML5 background video reaches a certain point. Right now it starts once the video is ended. Is there a way to find the progess of the video and start the animation once the video has reached a certain point? Here is my code.

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

4lbertoC · Accepted Answer · 2012-12-01 19:55:36Z

You could listen to the video's 'timeupdate' event. Then in the event handler you would check what is the current time, and start the animation if the time is right.

For example, if the variable v is the reference to your player, I can log this way the current time to the console:

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

Note1: I'm using addEventListener just as an example, you should rely on the corresponding method of the library that you are using, for maximum cross-browser compatibility.

Note2: Be careful that the time that is returned to you is not a precise integer. You could check that the current time is greater than a certain threshold, do your stuff and then disconnect the handler, or save the alreadyPlayedAnimation state somewhere in a variable.

Collectives™ on Stack Overflow

Start JavaScript Animation During HTML5 Video

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related