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