HTML Audio/Video DOM timeupdateEvents

HTML Audio/Video DOM Reference Manual

Example

When the video playback position has changed, display the current playback position of the video (in seconds):

// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");

// Add an ontimeupdate event to the <video> element, and execute a function if the current playback position changes.
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
// Display the video playback position in the <p> element with id="demo"
    document.getElementById("demo").innerHTML = vid.currentTime;
}

Try it Yourself »

This article contains more examples at the bottom.

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 cases:

  • Play audio/video (audio/video)
  • Move the playback position of audio/video

Tip:The timeupdate event is typically associated with the Audio/Video object'scurrentTimeUsed together with the attribute, this attribute returns the playback position of the audio/video (in seconds).

Browser Support

The numbers in the table indicate the version number of the first browser that supports this event.

Events
timeupdate Yes 9.0 Yes Yes Yes

Syntax

In HTML:

<audio|video ontimeupdate="myScript">Try it Yourself

In JavaScript:

audio|video.ontimeupdate=function(){myScript};Try it Yourself

In JavaScript, using the addEventListener() method:

audio|video.addEventListener("timeupdate", myScript);Try it Yourself

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()method.

Technical Details
Supported HTML tags: <audio> and <video>
Supported JavaScript objects: Audio, Video

Examples

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 an ontimeupdate event to the <audio> element and execute a 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;
}

Try it Yourself »

Example

Use the currentTime attribute to set the playback position to 5 seconds:

document.getElementById("myVideo").currentTime = 5;

Try it Yourself »

HTML Audio/Video DOM Reference Manualother extensions