HTML Audio & Video
HTML DOM Audio currentTime Property
The currentTime property sets or returns the current playback position, in seconds, of a media element. Reading it tells you where playback is; assigning to it seeks the media to a new position.
Definition and Usage
currentTime is a floating-point number of seconds from the start of the media. It updates continuously during playback and fires the timeupdate event, so it is the value you display in a clock or bind to a seek slider.
Assigning a value seeks the media. If the value falls outside the range 0 to duration, the browser clamps it to the valid range.
Syntax
// Get the current position
let t = mediaElement.currentTime;
// Seek to 30 seconds
mediaElement.currentTime = 30;Example
This runnable page shows a live clock, a skip button that jumps ahead 5 seconds, and a restart button that seeks back to 0. The clock stays in sync via the timeupdate event.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>currentTime Demo</title></head>
<body>
<h2>Read and set the playback position</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p>
<button onclick="skip()">Skip +5s</button>
<button onclick="restart()">Restart</button>
</p>
<p id="output">0.0s</p>
<script>
const video = document.getElementById("myVideo");
const out = document.getElementById("output");
function skip() { video.currentTime += 5; } // seek forward
function restart() { video.currentTime = 0; } // seek to start
// Keep the on-screen clock in sync
video.addEventListener("timeupdate", () => {
out.textContent = video.currentTime.toFixed(1) + "s";
});
</script>
</body>
</html>More Examples
Bind currentTime to a range slider so dragging the slider scrubs through the media.
<!DOCTYPE html>
<html>
<body>
<video id="v" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><input id="seek" type="range" min="0" max="100" value="0"></p>
<script>
const v = document.getElementById("v");
const seek = document.getElementById("seek");
// Dragging the slider scrubs the video
seek.addEventListener("input", () => {
v.currentTime = (seek.value / 100) * v.duration;
});
// Playback moves the slider
v.addEventListener("timeupdate", () => {
seek.value = (v.currentTime / v.duration) * 100 || 0;
});
</script>
</body>
</html>Seeking to a currentTime that has not been buffered causes the browser to fetch that region first, so playback may briefly pause with a waiting event before resuming.
Key Takeaways
- currentTime is the playback position in seconds, as a floating-point number.
- Read it for a clock; assign to it to seek the media.
- Out-of-range values are clamped to 0..duration.
- The timeupdate event fires several times per second to keep displays in sync.
- Add to currentTime for skip buttons; map a slider to it for a scrubber.