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

要使用on("timeupdate")事件，首先需要選擇要監(jiān)聽的視頻或音頻元素?？梢允褂胘Query選擇器來選擇元素，例如：

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

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

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

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

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

});

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

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

});

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

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

var currentTime = this.currentTime; // 獲取當(dāng)前播放時間

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

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

// 在頁面上顯示當(dāng)前播放時間和總時長

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

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

// 更新播放進(jìn)度條的寬度

$("#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);

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

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

千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，開設(shè)Java培訓(xùn)、web前端培訓(xùn)、大數(shù)據(jù)培訓(xùn)，python培訓(xùn)、軟件測試培訓(xùn)等課程，采用全程面授高品質(zhì)、高體驗(yàn)教學(xué)模式，擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，想獲取更多IT技術(shù)干貨請關(guān)注千鋒教育IT培訓(xùn)機(jī)構(gòu)官網(wǎng)。