Created
September 7, 2025 15:32
-
-
Save maitrungduc1410/500063c5aa06770991fd270e5e3598f1 to your computer and use it in GitHub Desktop.
Smooth video progress bar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Smooth Video Progress Bar</title> | |
<style> | |
body { | |
font-family: sans-serif; | |
padding: 20px; | |
background: #f8f8f8; | |
} | |
video { | |
width: 100%; | |
max-width: 600px; | |
display: block; | |
margin-bottom: 10px; | |
} | |
.progress-container { | |
width: 100%; | |
max-width: 600px; | |
height: 10px; | |
background: #ddd; | |
border-radius: 5px; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
.progress-bar { | |
height: 100%; | |
width: 0%; | |
background: linear-gradient(90deg, #06f, #0af); | |
transition: width 0s; /* disable CSS transition (we'll animate with JS) */ | |
} | |
</style> | |
</head> | |
<body> | |
<video | |
id="video" | |
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" | |
controls | |
></video> | |
<div class="progress-container" id="progress-container"> | |
<div class="progress-bar" id="progress-bar"></div> | |
</div> | |
<script> | |
const video = document.getElementById("video"); | |
const progressContainer = document.getElementById("progress-container"); | |
const progressBar = document.getElementById("progress-bar"); | |
// Animate with requestAnimationFrame for smoothness | |
function updateProgress() { | |
if (!video.paused && !video.ended) { | |
const percent = (video.currentTime / video.duration) * 100; | |
progressBar.style.width = percent + "%"; | |
requestAnimationFrame(updateProgress); | |
} | |
} | |
// Start animation when video plays | |
video.addEventListener("play", () => { | |
requestAnimationFrame(updateProgress); | |
}); | |
// Seek when user clicks on progress bar | |
progressContainer.addEventListener("click", (e) => { | |
const rect = progressContainer.getBoundingClientRect(); | |
const clickX = e.clientX - rect.left; | |
const percent = clickX / rect.width; | |
video.currentTime = percent * video.duration; | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment