HTMLMediaElement: timeupdate 事件

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

currentTime 屬性指示的時間更新時,會觸發 timeupdate 事件。

事件的觸發頻率取決於系統負載,但大約在 4Hz 到 66Hz 之間(假設事件處理程式的執行時間不超過 250ms)。鼓勵使用者代理根據系統負載和每次處理事件的平均成本來調整事件的觸發頻率,以便 UI 更新的頻率不會超過使用者代理在解碼影片時能夠舒適處理的頻率。

此事件不可取消,也不會冒泡。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("timeupdate", (event) => { })

ontimeupdate = (event) => { }

事件型別

一個通用的 Event

示例

這些示例為 HTMLMediaElement 的 timeupdate 事件添加了一個事件監聽器,然後在事件處理程式響應事件觸發時傳送一條訊息。請記住,事件的觸發頻率取決於系統負載。

使用 addEventListener()

js
const video = document.querySelector("video");

video.addEventListener("timeupdate", (event) => {
  console.log("The currentTime attribute has been updated. Again.");
});

使用 ontimeupdate 事件處理程式屬性

js
const video = document.querySelector("video");

video.ontimeupdate = (event) => {
  console.log("The currentTime attribute has been updated. Again.");
};

規範

規範
HTML
# event-media-timeupdate
HTML
# handler-ontimeupdate

瀏覽器相容性

另見