Issue
I've implemented the progress bar in my HTML and used JavaScript to update it during the video playback. However, it doesn't seem to reflect the correct progress.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Please help me</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
background-color: #222;
margin: 0;
padding: 0;
color: #fff;
}
#video-container {
max-width: 800px;
margin: 20px auto;
position: relative;
}
video {
width: 100%;
display: block;
}
#custom-controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: space-between;
padding: 10px;
opacity: 0;
transition: opacity 0.5s;
}
#video-container:hover #custom-controls {
opacity: 1;
}
button,
input {
background: none;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
margin: 0 5px;
}
input[type="range"] {
width: 150px;
}
#progress-bar-container {
flex-grow: 1;
display: flex;
align-items: center;
}
#progress-bar {
flex-grow: 1;
height: 5px;
margin: 0 10px;
position: relative;
cursor: pointer;
background-color: #555;
}
#progress-bar::before {
content: "";
position: absolute;
height: 100%;
width: 0;
background-color: #fff;
}
</style>
</head>
<body>
<div id="video-container">
<video id="myVideo">
<source src="1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div id="custom-controls">
<button id="playPauseBtn">►</button>
<input
type="range"
id="volumeRange"
min="0"
max="1"
step="0.1"
value="1"
/>
<span id="playbackSpeed">Speed: 1x</span>
<input
type="range"
id="speedRange"
min="0.5"
max="2"
step="0.1"
value="1"
/>
<button id="muteBtn">Mute 🔇</button>
<div id="progress-bar-container">
<span id="current-time">0:00</span>
<div id="progress-bar"></div>
<span id="duration">0:00</span>
</div>
<button id="fullscreenBtn">Full</button>
</div>
</div>
<script>
const video = document.getElementById("myVideo");
const playPauseBtn = document.getElementById("playPauseBtn");
const volumeRange = document.getElementById("volumeRange");
const speedRange = document.getElementById("speedRange");
const playbackSpeedDisplay = document.getElementById("playbackSpeed");
const muteBtn = document.getElementById("muteBtn");
const progressBar = document.getElementById("progress-bar");
const currentTimeDisplay = document.getElementById("current-time");
const durationDisplay = document.getElementById("duration");
const fullscreenBtn = document.getElementById("fullscreenBtn");
playPauseBtn.addEventListener("click", togglePlayPause);
volumeRange.addEventListener("input", setVolume);
speedRange.addEventListener("input", setSpeed); // Added event listener
muteBtn.addEventListener("click", toggleMute);
progressBar.addEventListener("click", seek);
fullscreenBtn.addEventListener("click", toggleFullscreen);
video.addEventListener("timeupdate", updateProgressBar);
video.addEventListener("durationchange", updateDuration);
video.addEventListener("ended", handleVideoEnd);
function togglePlayPause() {
if (video.paused) {
video.play();
playPauseBtn.innerHTML = "❚❚";
} else {
video.pause();
playPauseBtn.innerHTML = "►";
}
}
function setVolume() {
video.volume = volumeRange.value;
if (video.volume === 0) {
muteBtn.innerHTML = "Unmute 🔊";
} else {
muteBtn.innerHTML = "Mute 🔇";
}
}
function setSpeed() {
video.playbackRate = speedRange.value;
playbackSpeedDisplay.textContent = `Speed: ${speedRange.value}x`;
}
function toggleMute() {
video.muted = !video.muted;
if (video.muted) {
muteBtn.innerHTML = "Unmute 🔊";
} else {
muteBtn.innerHTML = "Mute 🔇";
}
}
function toggleFullscreen() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
}
function seek(e) {
const percent = e.offsetX / progressBar.clientWidth;
video.currentTime = percent * video.duration;
}
function updateProgressBar() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.width = percent + "%";
currentTimeDisplay.textContent = formatTime(video.currentTime);
}
function updateDuration() {
durationDisplay.textContent = formatTime(video.duration);
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}
function handleVideoEnd() {
playPauseBtn.innerHTML = "►";
progressBar.style.width = "0%";
currentTimeDisplay.textContent = "0:00";
}
</script>
</body>
</html>
I'm a total zero in JS, help me please
I tried to make a progress bar that shows how much the video has been viewed but it doesn't work :(
Despite my best efforts, the progress bar does not seem to update correctly. Can anyone help me determine what may be causing this problem and suggest possible solutions? I would appreciate any help in ensuring that the progress bar displays accurately when playing a video.
Solution
Set the width of the progress bar's ::before pseudo-element instead.
First, update the CSS to align the pseudo-element to the left and use a CSS variable for its width.
#progress-bar::before {
content: "";
position: absolute;
height: 100%;
width: var(--percent);
left: 0;
background-color: #fff;
}
Then, just set that CSS variable in the updateProgressBar function.
function updateProgressBar() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.setProperty('--percent', percent + '%')
currentTimeDisplay.textContent = formatTime(video.currentTime);
}
Answered By - Unmitigated
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.