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

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

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

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

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

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

// 在這里編寫(xiě)處理程序的代碼

});

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

// 在這里編寫(xiě)處理程序的代碼

});

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

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

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

var duration = this.duration; // 獲取總時(shí)長(zhǎng)

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

// 在頁(yè)面上顯示當(dāng)前播放時(shí)間和總時(shí)長(zhǎ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);

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

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

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