HTML | DOM ontimeupdate Event
The ontimeupdate event in HTML DOM occurs when playing the position of a specific media position is changed.
This event is invoked by:
- Playing the audio/video
- Moving to the new position of the audio/video
The currentTime property is used to get the current position of the audio/video in seconds.
Supported Tags
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- <audio>
- <video>
Syntax:
- In HTML:
<element ontimeupdate="Script">
- In JavaScript:
object.ontimeupdate = function(){Script};- In JavaScript, using the addEventListener() method:
object.addEventListener("timeupdate", Script);Example: Using the addEventListener() method
html
<!DOCTYPE html><html><head> <title> HTML DOM ontimeupdate Event </title></head><body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM ontimeupdate Event</h2> <video id="videoID" controls> <source src="GFG.mp4" type="video/mp4"> </video> <p>Position: <span id="try"></span></p> </center> <script> var GFG = document.getElementById("videoID"); GFG.addEventListener("timeupdate", GFGfun); function GFGfun() { document.getElementById( "try").innerHTML = GFG.currentTime; } </script></body></html> |
Output:
Before:
After:
Supported Browsers: The browsers supported by HTML DOM ontimeupdate Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
