HTML ontimeupdate Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The ontimeupdate HTML event attribute specifies a JavaScript function to be executed when the playback position of an audio or video element has changed. This event is fired frequently, typically at a rate of 4 to 66 times per second.

The ontimeupdate event is often used to update the user interface of a media player, such as the progress bar or the current time display. It can also be used to trigger other events, such as displaying subtitles or playing a sound effect at a specific point in the media.

To use the ontimeupdate event, you simply need to add the attribute to the audio or video element and specify the name of the JavaScript function to be executed. For example, the following code will call the myFunction() function whenever the playback position of the video element changes:

<video ontimeupdate="myFunction()">
  <source src="video.mp4" type="video/mp4">
</video>

Inside the myFunction() function, you can use the currentTime property of the audio or video element to get the current playback position in seconds. You can then use this information to update the user interface or trigger other events.

Here is an example of a JavaScript function that updates the progress bar of a video player when the playback position changes:

function updateProgressBar() {
  // Get the current playback position in seconds.
  var currentTime = video.currentTime;

  // Calculate the percentage of the video that has been played.
  var percentagePlayed = currentTime / video.duration * 100;

  // Update the progress bar.
  progressBar.style.width = percentagePlayed + "%";
}

You would then call this function from the ontimeupdate event handler, like so:

<video ontimeupdate="updateProgressBar()">
  <source src="video.mp4" type="video/mp4">
</video>

Syntax

<element ontimeupdate="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<p id="demo">Move the audio slider to a new position:</p>



<audio id="myAudio" controls ontimeupdate="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<script>

function myFunction() {

    document.getElementById("demo").innerHTML = "You have moved to position " + document.getElementById("myAudio").currentTime;

}

</script> 



<p>This example shows how to use the ontimeupdate attribute for an AUDIO element.</p>



</body>

</html>