Easy Tutorial
❮ Canvas Strokerect Att Th Headers ❯

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:

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:

❮ Canvas Strokerect Att Th Headers ❯