Начать анимацию JavaScript во время видео HTML5

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

Вы можете прослушивать событие «время ожидания» видео. Затем в обработчике событий вы проверите, каково текущее время, и запустите анимацию, если время правильное.

Например, если переменная v является ссылкой на плеер, я могу войти таким образом текущее время на консоль:

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

Note1: Я использую addEventListener только в качестве примера , вы должны полагаться на соответствующий метод библиотеки, который вы используете, для максимальной совместимости между браузерами.

Примечание2. Будьте осторожны, чтобы время, которое вам было возвращено, не является точным целым числом. Вы можете проверить, что текущее время больше определенного порогового значения, сделать ваши вещи, а затем отключить обработчик или сохранить состояние isIlimeAnimation где-то в переменной.