timeupdate

About

The timeupdate event is triggered on a media element (such as an HTML5 video or audio player) when the current playback time of the media changes. The event is fired at a regular interval as the media plays, typically every 250 milliseconds.

This event is useful for updating the UI of a media player to reflect the current playback position of the media, such as updating a progress bar or displaying the elapsed time. By listening for the timeupdate event and accessing the currentTime property of the media element, you can determine the current playback time of the media and update the UI accordingly.

It's worth noting that the timeupdate event may not fire at exactly the same interval on all browsers and devices. For example, some browsers may fire the event every 200 milliseconds instead of 250 milliseconds. Additionally, the event may not fire at all if the media element is paused or stopped. Therefore, it's important to account for these variations in your code and handle them appropriately.

Event listener

Here's an example of how to use the addEventListener() method to attach a timeupdate event listener to a media element:

HTML

JavaScript

Here, we first select the video element using document.getElementById(). We then use the addEventListener() method to attach a timeupdate event listener to the video element. The event listener is an arrow function that gets the current playback time of the video using the currentTime property and updates the UI accordingly.

Note that the timeupdate event fires repeatedly as the media plays, so the event listener will be called multiple times during playback. Be sure to handle this appropriately in your code.

Property

Here's an example of how to use the ontimeupdate property to attach a timeupdate event listener to a media element:

Here, we first select the video element using document.getElementById(). We then use the ontimeupdate property to attach a timeupdate event listener to the video element. The event listener is a function that gets the current playback time of the video using the currentTime property and updates the UI accordingly.

Inline

Here's an example of how to use an inline ontimeupdate attribute to attach a timeupdate event listener to a media element:

HTML

JavaScript

Here, we define an inline ontimeupdate attribute on the video element that calls a updateTime() function whenever the timeupdate event is fired. The updateTime() function gets the current playback time of the video using the currentTime property and updates the UI accordingly.

Note that inline event listeners can make your HTML code harder to read and maintain, especially for larger projects. It's generally considered better practice to use the addEventListener() method or ontimeupdate property to attach event listeners in JavaScript code instead.

Programmatic trigger

There is no timeupdate() method to trigger a timeupdate event programmatically. The timeupdate event is fired automatically by the browser when the playback position of a media element changes.

However, you can set the currentTime property of a media element to simulate a change in the playback position and trigger the timeupdate event:

Here, setting the currentTime property to 10 seconds will simulate a change in the playback position and trigger the timeupdate event, calling any event listeners that are attached to the element.