HTML Audio/Video DOM timeupdate
Event
HTML Audio/Video DOM Reference Manual
Example
When the video playback position changes, display the current playback position of the video (in seconds):
More examples are included at the bottom of this article.
Definition and Usage
The timeupdate
event is triggered when the playback position of the audio/video changes.
This event can be invoked in the following situations:
- Playing audio/video
- Moving the playback position of audio/video
Tip: The timeupdate
event is commonly used with the currentTime
property of the Audio/Video object, which returns the playback position of the audio/video (in seconds).
Browser Support
The numbers in the table indicate the first browser version that supports the event.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
timeupdate | Yes | 9.0 | Yes | Yes | Yes |
Syntax
In HTML:
In JavaScript:
In JavaScript, using the addEventListener()
method:
Note: Internet Explorer 8 and earlier versions do not support the addEventListener()
method.
Supported HTML Tags: | <audio> and <video> |
---|---|
Supported JavaScript Objects: | Audio, Video |
--- | --- |
More Examples
Example
When the playback position of the audio changes, display the current playback position of the audio (in seconds):
// Get the <audio> element with id="myVideo"
var aud = document.getElementById("myVideo");
// Add the ontimeupdate event to the <audio> element and execute the function when the playback position changes
aud.ontimeupdate = function() { myFunction() };
function myFunction() {
// Display the playback position of the audio in the <p> element with id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
Example
Use the currentTime
property to set the playback position to 5 seconds: