當(dāng)currentTime更新時(shí)會(huì)觸發(fā)timeupdate事件。 這個(gè)事件的觸發(fā)頻率由系統(tǒng)決定，但是會(huì)保證每秒觸發(fā)4-66次（前提是每次事件處理不會(huì)超過(guò)250ms）。鼓勵(lì)用戶代理根據(jù)系統(tǒng)的負(fù)載和處理事件的平均成本來(lái)改變事件的頻率，保證UI更新不會(huì)影響視頻的解碼。
視頻的播放位置更改后，以秒為單位顯示視頻的當(dāng)前位置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 ontimeupdate 事件使用-菜鳥(niǎo)教程(cainiaoplus.com)</title>
</head>
<body>
<p>該示例中，我們使用了 HTML DOM 為 video 元素添加 "ontimeupdate" 事件。
在用戶開(kāi)始播放視頻，或者移動(dòng)視頻的播放位置時(shí)觸發(fā)函數(shù)，并顯示視頻的播放位置。</p>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
<p>播放位置: <span id="demo"></span></p>
<script>
// 獲取 id="myVideo" 的 video 元素
var vid = document.getElementById("myVideo");
// 為 video 元素添加 ontimeupdate 事件，如果當(dāng)前播放位置改變則執(zhí)行函數(shù)
vid.ontimeupdate = function() {myFunction()};
function myFunction()
{
// 顯示 id="demo" 的 p 元素中視頻的播放位置
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>測(cè)試看看 ?/?timeupdate 事件在音頻/視頻（audio/video）的播放位置發(fā)生改變時(shí)觸發(fā)。
該事件可以在以下情況被調(diào)用:
播放音頻/視頻（audio/video）
移動(dòng)音頻/視頻（audio/video）播放位置
提示： timeupdate 事件通常與 Audio/Video 對(duì)象的currentTime 屬性一起使用，該屬性返回音頻/視頻（audio/video）的播放位置（以秒計(jì)）。
IEFirefoxOperaChromeSafari
HTML 中：
<audio|video ontimeupdate="myScript">嘗試一下
JavaScript 中：
audio|video.ontimeupdate=function(){myScript};嘗試一下
JavaScript 中, 使用 addEventListener() 方法:
audio|video.addEventListener("timeupdate", myScript);嘗試一下
注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
技術(shù)細(xì)節(jié)| 支持的 HTML 標(biāo)簽: | <audio> 和 <video> |
|---|---|
| 支持的 JavaScript 對(duì)象: | Audio, Video |
當(dāng)音頻的播放位置改變時(shí)，顯示當(dāng)前音頻的播放位置（以秒計(jì)）:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 ontimeupdate 事件使用-菜鳥(niǎo)教程(cainiaoplus.com)</title>
</head>
<body>
<p>該示例中，我們使用了 HTML DOM 為 audio 元素添加 "ontimeupdate" 事件。
在用戶開(kāi)始播放視頻，或者移動(dòng)音頻的播放位置時(shí)觸發(fā)函數(shù)，并顯示視頻的播放位置。</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
<p>播放位置: <span id="demo"></span></p>
<script>
// 獲取 id="myAudio" 的 audio
var aud = document.getElementById("myAudio");
// 為 audio 元素添加 ontimeupdate 事件，并在播放位置改變時(shí)執(zhí)行函數(shù)
aud.ontimeupdate = function()
{
myFunction()
};
function myFunction()
{
// 顯示 id="demo" 的 <p> 元素中音頻的播放位置
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>測(cè)試看看 ?/?使用 currentTime 屬性設(shè)置播放位置為 5 秒:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 ontimeupdate 事件使用-菜鳥(niǎo)教程(cainiaoplus.com)</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video><br>
<button onclick="setCurTime()" type="button">設(shè)置播放位置為 5 秒</button>
<p id="demo"></p>
<script>
// 獲取 id="myVideo" 的 video 元素
var vid = document.getElementById("myVideo");
// 為 video 添加 "timeupdate" 事件
vid.addEventListener("timeupdate", getCurTime);
// 顯示 id="demo" 的 p 元素中視頻的播放位置
function getCurTime()
{
document.getElementById("demo").innerHTML = "當(dāng)前播放位置為 " + vid.currentTime + " 秒。";
}
// 設(shè)置播放位置為 5 秒
function setCurTime()
{
vid.currentTime = 5;
}
</script>
</body>
</html>測(cè)試看看 ?/?