The HTML ontimeupdate attribute is an event handler used to specify a script that will run when the playing position of an audio or video element changes.
Definition and Usage
➔ This event is often triggered during media playback or when the user wants to move to a new location.
Syntax
//In HTML
<video controls ontimeupdate="myFunction()" id="sample">
<source src="video-source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
//In javascript
document.getElementById("sample").ontimeupdate=function() {myFunction();};
//OR
document.getElementById("sample").addEventListener("timeupdate", myFunction);
//OR
document.getElementById("sample").addEventListener("timeupdate", (event) => {
myFunction();
});
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| ontimeupdate | <audio>, <video> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ontimeupdate attribute example</title>
</head>
<body>
<h3>HTML ontimeupdate attribute example</h3>
<p>ontimeupdate event fires when the playing position of an audio or video element changes.</p>
<p id="output">Playing position:</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video controls ontimeupdate="myFunction(event)" id="sample">
<source src="video-source-path.mp4" type="video/mp4">
This browser does not support the video tag.
</video>
<script>
//In javascript
//document.getElementById("sample").ontimeupdate=function() {myFunction();};
//OR
//document.getElementById("sample").addEventListener("timeupdate", myFunction);
function myFunction() {
var video = document.getElementById("sample");
var time = video.currentTime;
document.getElementById("output").innerHTML = "Playing position: "+time.toFixed(2);
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.