一、什么是timeupdate事件
timeupdate事件是HTML5具有时间轴功能的audio和video标签所支持的事件，它会在播放位置发生变化时触发。比如，视频的播放位置发生改变时，timeupdate事件就会被触发，可以通过监听此事件来实现一些特定需求。 通常，我们使用addEventListener来绑定该事件：
<video>
...
</video>
<script>
var video = document.getElementsByTagName('video')[0];
video.addEventListener('timeupdate', function(event) {
// TODO
});
</script>
二、timeupdate事件如何应用
1. 进度条
timeupdate事件最常见的应用之一就是实现进度条。通过监听事件的触发，在事件处理函数中获取当前事件的事件对象，然后通过该对象的currentTime属性获取到当前的播放时间，计算出当前播放时间与总时间的比值，可以计算出进度条的长度。
<video id="myVideo" src="test.mp4"></video>
<div id="progress">
<div></div>
</div>
<script>
let video = document.getElementById("myVideo");
let progress = document.getElementById("progress");
video.addEventListener("timeupdate", function() {
let duration = this.duration;
let currentTime = this.currentTime;
let percent = (currentTime / duration) * 100;
progress.children[0].style.width = percent + "%";
});
</script>
2. 时间显示
另一个常见的应用是在播放器上显示当前播放时间以及视频总时长。同样，通过事件处理函数中的事件对象，获取到当前时间currentTime和视频总时间duration，通过一定的格式化操作，生成可读性良好的时间字符串。
<video id="myVideo" src="test.mp4"></video>
<div id="time">00:00 / 00:00</div>
<script>
let video = document.getElementById("myVideo");
let time = document.getElementById("time");
video.addEventListener('timeupdate', function() {
let duration = this.duration;
let currentTime = this.currentTime;
time.innerHTML = formatTime(currentTime) + ' / ' + formatTime(duration);
});
function formatTime(time) {
time = Math.round(time);
let min = Math.floor(time / 60);
let sec = time % 60;
return (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec);
}
</script>
三、小标题3
1、文字阐述内容1 2、文字阐述内容2 3、文字阐述内容3
