HTML ontimeupdate Event Attribute
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
<!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>
Browser Support
The following table will show you the current browser support for the HTML ontimeupdate
Event Attribute.
Desktop | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023