timeupdate事件详解

一、什么是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