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
HTML DOM Video currentTime Property
The HTML DOM Video currentTime property returns or sets the current playback position of a video element in seconds. This property is commonly used to create custom video controls, implement seek functionality, or track video progress.
Syntax
Following is the syntax to get the current time position −
mediaObject.currentTime
Following is the syntax to set the current time position −
mediaObject.currentTime = seconds
Parameters
seconds − A numeric value representing the time position in seconds where you want to set the playback position. The value should be within the video's duration range.
Return Value
When getting the property, it returns a floating-point number representing the current playback time in seconds. When setting the property, it does not return a value but moves the video playback to the specified time position.
Example − Basic currentTime Usage
Following example demonstrates getting and setting the currentTime property −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video currentTime</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Video currentTime Property Demo</h2>
<video id="myVideo" width="400" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>
<button onclick="getCurrentTime()" style="padding: 8px 16px; margin: 5px;">Get Current Time</button>
<button onclick="setToFiveSeconds()" style="padding: 8px 16px; margin: 5px;">Jump to 5 seconds</button>
<button onclick="setToTenSeconds()" style="padding: 8px 16px; margin: 5px;">Jump to 10 seconds</button><br><br>
<div id="result" style="background: #f0f0f0; padding: 10px; margin-top: 10px;"></div>
<script>
var video = document.getElementById("myVideo");
var result = document.getElementById("result");
function getCurrentTime() {
result.innerHTML = "Current time: " + video.currentTime.toFixed(2) + " seconds";
}
function setToFiveSeconds() {
video.currentTime = 5;
result.innerHTML = "Video jumped to 5 seconds";
}
function setToTenSeconds() {
video.currentTime = 10;
result.innerHTML = "Video jumped to 10 seconds";
}
</script>
</body>
</html>
The example shows three buttons: one to display the current playback time and two others to jump to specific time positions in the video.
Example − Custom Video Progress Bar
Following example creates a custom progress bar that updates with the video's currentTime −
<!DOCTYPE html>
<html>
<head>
<title>Custom Video Progress Bar</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Video Progress Tracker</h2>
<video id="videoPlayer" width="400" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>
<div style="background: #ddd; width: 400px; height: 20px; border-radius: 10px; position: relative;">
<div id="progressBar" style="background: #4CAF50; height: 20px; width: 0%; border-radius: 10px; transition: width 0.1s;"></div>
</div><br>
<div id="timeDisplay" style="font-size: 14px; color: #666;">0:00 / 0:00</div>
<script>
var video = document.getElementById("videoPlayer");
var progressBar = document.getElementById("progressBar");
var timeDisplay = document.getElementById("timeDisplay");
video.addEventListener("timeupdate", function() {
var progress = (video.currentTime / video.duration) * 100;
progressBar.style.width = progress + "%";
var currentMin = Math.floor(video.currentTime / 60);
var currentSec = Math.floor(video.currentTime % 60);
var durationMin = Math.floor(video.duration / 60);
var durationSec = Math.floor(video.duration % 60);
timeDisplay.innerHTML = currentMin + ":" + (currentSec < 10 ? "0" : "") + currentSec +
" / " + durationMin + ":" + (durationSec < 10 ? "0" : "") + durationSec;
});
</script>
</body>
</html>
This example shows a custom progress bar that fills as the video plays and displays the current time and total duration in MM:SS format.
Example − Video Chapter Navigation
Following example demonstrates using currentTime to create chapter navigation for a video −
<!DOCTYPE html>
<html>
<head>
<title>Video Chapter Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Chapter Navigation</h2>
<video id="chapterVideo" width="400" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>
<h3>Chapters:</h3>
<button onclick="jumpToChapter(0)" style="padding: 8px 12px; margin: 3px; background: #e7f3ff; border: 1px solid #b3d9ff;">Start (0:00)</button>
<button onclick="jumpToChapter(5)" style="padding: 8px 12px; margin: 3px; background: #e7f3ff; border: 1px solid #b3d9ff;">Chapter 1 (0:05)</button>
<button onclick="jumpToChapter(10)" style="padding: 8px 12px; margin: 3px; background: #e7f3ff; border: 1px solid #b3d9ff;">Chapter 2 (0:10)</button>
<button onclick="jumpToChapter(15)" style="padding: 8px 12px; margin: 3px; background: #e7f3ff; border: 1px solid #b3d9ff;">Chapter 3 (0:15)</button><br><br>
<div id="chapterInfo" style="background: #f9f9f9; padding: 10px; border-left: 4px solid #4CAF50;">
Click a chapter button to jump to that section of the video.
</div>
<script>
var video = document.getElementById("chapterVideo");
var chapterInfo = document.getElementById("chapterInfo");
function jumpToChapter(seconds) {
video.currentTime = seconds;
video.play();
chapterInfo.innerHTML = "Jumped to " + formatTime(seconds) + " - Video is now playing from this position.";
}
function formatTime(seconds) {
var min = Math.floor(seconds / 60);
var sec = seconds % 60;
return min + ":" + (sec < 10 ? "0" : "") + sec;
}
</script>
</body>
</html>
This example creates chapter navigation buttons that jump to specific timestamps in the video and automatically start playback.
Key Points
-
The
currentTimeproperty accepts and returns floating-point numbers, allowing precise control down to fractions of a second. -
Setting
currentTimeto a value greater than the video duration will set it to the end of the video. -
The property works with the
timeupdateevent to track video progress in real-time. -
You can use
currentTimewithdurationproperty to calculate percentage progress:(currentTime / duration) * 100. -
The property is read-write, meaning you can both get the current position and set a new position.
Common Use Cases
-
Custom video controls − Creating seek bars, chapter navigation, and time displays.
-
Video bookmarking − Saving and restoring specific playback positions.
-
Video analysis − Tracking viewing patterns and user engagement.
-
Educational content − Implementing quiz triggers at specific timestamps.
Conclusion
The HTML DOM Video currentTime property provides precise control over video playback position. It enables developers to create interactive video experiences with custom controls, chapter navigation, and real-time progress tracking. The property works seamlessly with video events and other DOM video properties to build comprehensive multimedia applications.
449 Views
