倒数HTML5影片结尾 [英] Countdown to the end of the HTML5 video

问题描述

我可以倒数HTML5视频的结尾吗?

Can I make a countdown to the end of the HTML5 video?

<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>

我了解必须等待视频加载，然后再加载视频，因此需要知道视频的长度并运行视频并进行压缩.

I understand that a have to wait for the video load, and then if the video is loaded, need to know the length and run video and coundown.

推荐答案

收听视频对象触发的timeupdate事件并更新剩余时间.

Listen to the timeupdate event fired by the video object and update the time remaining.

类似的事情应该起作用:

Something like this should work:

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

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

这篇关于倒数HTML5影片结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！