倒计时HTML5视频结束

Question

我能否制作一个倒计时来结束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>

我理解我需要等待视频加载，如果视频已经加载，需要知道长度并运行视频和倒计时。

- user2005679

---

你能帮忙写代码吗？ - user2005679

Answer 1

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

类似以下代码应该可以工作：

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

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

- Tyler Hughes

---

如何在视频加载时自动开始播放？ 我尝试了这样：http://jsfiddle.net/Gg3B6/1/ 它可以工作，但是正确吗？ - user2005679

只需在视频元素中添加 autoplay="true" 即可。我已更新你的 fiddle 演示：http://jsfiddle.net/Gg3B6/2/ - Tyler Hughes

Answer 2

这应该对你有帮助。

countdown = video.duration - video.currentTime

请参见 这里 以获取更多详细信息。

- Ani