ontimeupdate

The ontimeupdate event in HTML is triggered when the playback position of a media element changes, enabling scripts to react to updates in the media's timing.

ontimeupdate event

The ontimeupdate event attribute activates a script whenever the playback position of a media element (<audio> or <video>) is updated. It's helpful for tracking or showing the current playback time.

Syntax

In HTML

index.html

<element ontimeupdate ="myScript">

In JS

script.js

object.ontimeupdate  = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("timeupdate ", myScript);

Example

::event-ontimeupdate ::

index.html

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The ontimeupdate</h2>

<p>Assign an "ontimeupdate" event to a video element.</p>
<p>When the user plays the video, or skips to a new position, a function will display the position (in seconds) of the playback:</p>

<video controls ontimeupdate="myFunction(this)">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Playback position: <span id="demo"></span></p>

<script>
function myFunction(event) {
  // The currentTime property returns the current position of the audio/video playback
  document.getElementById("demo").innerHTML = event.currentTime;
}
</script>

<p>Video courtesy of <a href="https://institute.qarpeo.com" target="_blank">Tree</a>.</p>

</body>
</html>

Values

<script>
- Specifies the <script> to execute when the event is triggered.

Conclusion

The ontimeupdate event triggers a script when the playback position of a media element is updated. This is useful for tracking or displaying the current playback time. It enhances interactivity by allowing real-time updates during media playback.

onsuspend

The onsuspend event in HTML occurs when media playback is temporarily paused, enabling scripts to react to this change in the media element's state.

onvolumechange

The onvolumechange event in HTML is triggered when the volume of audio or video content is adjusted, allowing scripts to react to these changes in volume.