Обратный отсчет до конца видео HTML5


Могу ли я сделать обратный отсчет до конца видео HTML5?

<video id="video" width="400" height="225" preload="auto">
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<div id="countdown">Video ends after <span>XX</span> seconds.</div>

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

2 2

2 ответа:

Прослушайте событие timeupdate, вызванное объектом video, и обновите оставшееся время.

Что-то вроде этого должно работать:

var video = document.getElementById('video');
video.addEventListener('timeupdate', updateCountdown);

function updateCountdown() {
    var timeSpan = document.querySelector('#countdown span');
    timeSpan.innerText = video.duration - video.currentTime;
}

Это должно сделать трюк для вас

countdown = video.duration - video.currentTime

Смотрите здесь для получения более подробной информации