ontimeupdate Event
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>该实例中我们向 video 元素添加 "ontimeupdate" 事件。当用户开始播放视频，或者重新定位视频播放位置时，会执行显示当前播放位置的函数。</p>
<video controls ontimeupdate="myFunction(this)">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video。
</video>
<p>当前播放位置： <span id="demo"></span></p>
<script>
function myFunction(event) {
// currentTime 属性返回视频/音频（audio/video）当前播放位置
document.getElementById("demo").innerHTML = event.currentTime;
}
</script>
</body>
</html>Click "Run Instance" button to view an online instance
More examples are included at the bottom of this article.
Definition and usage
The ontimeupdate event is triggered when the current playback position of the video/audio (audio/video) changes.
This event is called in the following way:
- Play video/audio (audio/video)
- Reposition the playback position of video/audio (audio/video) .
Tip: This event is usually used with the currentTime property of the Video object,
This property returns the current playback position of the video/audio (audio/video).
Browser support
The number in the table indicates the version number of the first browser that supports the event.
| Event |
|
|
|
|
|
|---|
#ontimeupdate | Yes | 9.0 | Yes | Yes | Yes |
##Syntax
HTML:
< ;
element
ontimeupdate="myScript">Try it
JavaScript:
object
.ontimeupdate=function(){myScript}; Try it
In JavaScript, use the addEventListener() method:
object
.addEventListener("seeking", myScript); Try it
Note:
Internet Explorer 8 and earlier IE versions do not support addEventListener( ) method. Technical details
Whether bubbling is supported:| No | |
|---|
Can be canceled:| No | |
|---|
Event type:| Event | | ##Supported HTML tags:
|---|
<audio>, <video> | |
More instances
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>该实例中我们向 audio 元素添加 "ontimeupdate" 事件。当用户开始播放音频，或者重新定位音频播放位置时，会执行显示当前播放位置的函数。</p>
<audio controls ontimeupdate="myFunction(this)">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<p>当前播放位置: <span id="demo"></span></p>
<script>
function myFunction(event) {
// currentTime 属性返回视频/音频（audio/video）当前播放位置
document.getElementById("demo").innerHTML = event.currentTime;
}
</script>
</body>
</html>Click the "Run Instance" button to view the online instance
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>该实例中我们向 video 元素添加 "timeupdate" 事件。currentTime属性用户获取当前视频/音频的播放位置。</p>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video。
</video><br>
<button onclick="setCurTime()" type="button">设置播放位置为 5 秒</button>
<p id="demo"></p>
<script>
// 获取 id="myVideo" 的 video 元素
var x = document.getElementById("myVideo");
// 向 video 元素添加 timeupdate 事件
x.addEventListener("timeupdate", getCurTime);
// 显示 id="demo" 的 p 元素中视频的当前播放位置
function getCurTime() {
document.getElementById("demo").innerHTML = "当前播放位置为 " + x.currentTime + " 秒。";
}
// 设置播放当前位置为 5 秒
function setCurTime() {
x.currentTime = 5;
}
</script>
</body>
</html>Click the "Run Instance" button to view the online instance
