Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the playback position of the media has changed in HTML?
The ontimeupdate event in HTML triggers whenever the playback position of a media element changes. This event fires continuously during media playback, including when users seek to different positions, fast forward, rewind, or during normal playback progression.
Syntax
Following is the syntax for the ontimeupdate event attribute −
<video ontimeupdate="functionName()"></video> <audio ontimeupdate="functionName()"></audio>
You can also add the event listener using JavaScript −
mediaElement.addEventListener('timeupdate', functionName);
How It Works
The ontimeupdate event fires approximately every 250 milliseconds during media playback, but this frequency may vary depending on the browser and system performance. The event provides access to the media element's currentTime property, which returns the current playback position in seconds.
Common use cases for this event include −
Displaying current playback time to users
Updating progress bars or seek sliders
Synchronizing content with media playback
Implementing custom media controls
Example − Video Time Display
Following example demonstrates the ontimeupdate event with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Time Update Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 id="timeDisplay">Press Play to Start</h2>
<video id="myVideo" width="400" height="225" controls ontimeupdate="updateTime()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="duration">Total Duration: Loading...</p>
<script>
function updateTime() {
var video = document.getElementById("myVideo");
var current = Math.floor(video.currentTime);
var total = Math.floor(video.duration);
var currentMinutes = Math.floor(current / 60);
var currentSeconds = current % 60;
var totalMinutes = Math.floor(total / 60);
var totalSeconds = total % 60;
document.getElementById("timeDisplay").innerHTML =
"Current Time: " + currentMinutes + ":" +
(currentSeconds < 10 ? "0" + currentSeconds : currentSeconds) +
" / " + totalMinutes + ":" +
(totalSeconds < 10 ? "0" + totalSeconds : totalSeconds);
}
// Update duration when metadata is loaded
document.getElementById("myVideo").addEventListener('loadedmetadata', function() {
var video = this;
var total = Math.floor(video.duration);
var totalMinutes = Math.floor(total / 60);
var totalSeconds = total % 60;
document.getElementById("duration").innerHTML =
"Total Duration: " + totalMinutes + ":" +
(totalSeconds < 10 ? "0" + totalSeconds : totalSeconds);
});
</script>
</body>
</html>
This example displays the current playback time in MM:SS format and updates continuously as the video plays.
Example − Audio Progress Bar
Following example shows how to create a visual progress bar for audio playback −
<!DOCTYPE html>
<html>
<head>
<title>Audio Progress Bar</title>
<style>
.progress-container {
width: 400px;
height: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.progress-bar {
height: 100%;
background-color: #4CAF50;
width: 0%;
transition: width 0.1s ease;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Player with Progress Bar</h2>
<audio id="myAudio" controls ontimeupdate="updateProgress()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<div class="progress-container">
<div id="progressBar" class="progress-bar"></div>
</div>
<p id="progressText">Progress: 0%</p>
<script>
function updateProgress() {
var audio = document.getElementById("myAudio");
var progressBar = document.getElementById("progressBar");
var progressText = document.getElementById("progressText");
if (audio.duration > 0) {
var progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = progress + "%";
progressText.innerHTML = "Progress: " + Math.round(progress) + "%";
}
}
</script>
</body>
</html>
The progress bar fills as the audio plays, providing visual feedback of the current playback position.
Using addEventListener Method
Instead of the inline ontimeupdate attribute, you can add the event listener programmatically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>addEventListener timeupdate</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 id="status">Video Ready</h2>
<video id="videoPlayer" width="350" height="200" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p id="playbackInfo">Playback information will appear here.</p>
<script>
var video = document.getElementById("videoPlayer");
var status = document.getElementById("status");
var info = document.getElementById("playbackInfo");
video.addEventListener('timeupdate', function() {
var currentTime = this.currentTime;
var duration = this.duration;
var percentage = (currentTime / duration) * 100;
status.innerHTML = "Playing: " + Math.floor(currentTime) + "s";
info.innerHTML = "Completion: " + Math.round(percentage) + "% | " +
"Remaining: " + Math.floor(duration - currentTime) + "s";
});
video.addEventListener('play', function() {
status.innerHTML = "Video Started";
});
video.addEventListener('pause', function() {
status.innerHTML = "Video Paused";
});
</script>
</body>
</html>
This approach provides more flexibility and separates JavaScript logic from HTML markup.
Key Points
When working with the ontimeupdate event, consider these important aspects −
Frequency − The event fires frequently (approximately every 250ms), so avoid heavy computations in the event handler.
Browser Support − Supported by all modern browsers for both HTML5 video and audio elements.
currentTime Property − Returns playback position in seconds as a floating-point number.
Performance − Use throttling techniques if you need to perform expensive operations during time updates.
Conclusion
The ontimeupdate event is essential for creating interactive media experiences in HTML5. It enables real-time tracking of playback progress, allowing developers to build custom controls, progress indicators, and synchronized content. Use this event to enhance user experience by providing visual feedback and interactive media features.
175 Views
