倒计时结束HTML5视频

时间:2013-01-23 23:34:35

标签: javascript html5 video countdown

我可以倒数到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>

我知道必须等待视频加载,然后如果加载了视频,需要知道长度并运行视频和coundown。

2 个答案:

答案 0 :(得分:5)

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

这样的事情应该有效:

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

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

答案 1 :(得分:0)

这应该是你的伎俩

countdown = video.duration - video.currentTime

有关详细信息,请参阅here