jQuery的on()方法可以用來綁定事件處理程序，而on("timeupdate")可以用來監聽HTML5視頻或音頻元素的播放進度更新事件。當視頻或音頻的播放進度發生變化時，on("timeupdate")事件將被觸發。

要使用on("timeupdate")事件，首先需要選擇要監聽的視頻或音頻元素。可以使用jQuery選擇器來選擇元素，例如：

var video = $("video"); // 選擇video元素

var audio = $("audio"); // 選擇audio元素

然后，可以使用on()方法來綁定timeupdate事件處理程序，例如：

video.on("timeupdate", function() {

// 在這里編寫處理程序的代碼

});

audio.on("timeupdate", function() {

// 在這里編寫處理程序的代碼

});

在timeupdate事件處理程序中，可以編寫代碼來響應播放進度的變化。例如，可以獲取當前播放時間、總時長等信息，并根據需要執行相應的操作。以下是一個示例：

video.on("timeupdate", function() {

var currentTime = this.currentTime; // 獲取當前播放時間

var duration = this.duration; // 獲取總時長

var progress = (currentTime / duration) * 100; // 計算播放進度百分比

// 在頁面上顯示當前播放時間和總時長

$("#current-time").text(formatTime(currentTime));

$("#duration").text(formatTime(duration));

// 更新播放進度條的寬度

$("#progress-bar").css("width", progress + "%");

});

function formatTime(time) {

var minutes = Math.floor(time / 60);

var seconds = Math.floor(time % 60);

return minutes + ":" + (seconds < 10 ? "0" + seconds : seconds);

在上面的示例中，通過獲取當前播放時間和總時長，計算出播放進度百分比，并將其應用到頁面上的元素上。還定義了一個formatTime()函數，用于格式化時間顯示。

通過以上代碼，你可以根據需要在timeupdate事件處理程序中執行各種操作，例如更新播放進度條、顯示當前播放時間等。希望對你有所幫助！

千鋒教育擁有多年IT培訓服務經驗，開設Java培訓、web前端培訓、大數據培訓，python培訓、軟件測試培訓等課程，采用全程面授高品質、高體驗教學模式，擁有國內一體化教學管理及學員服務，想獲取更多IT技術干貨請關注千鋒教育IT培訓機構官網。