Upload player.js

player.js

@@ -0,0 +1,74 @@
+const player = document.getElementById("player");
+const videoControls = document.querySelector(".controls");
+
+player.addEventListener("click", togglePlay);
+player.addEventListener("play", updateButton);
+player.addEventListener("pause", updateButton);
+player.addEventListener("timeupdate", handleProgress);
+player.addEventListener("loadedmetadata", setTotalTime);
+player.addEventListener("mousemove", showControls);
+
+const playButton = document.querySelector(".play");
+const progressBar = document.querySelector(".progress-filled");
+const timeDisplay = document.querySelector(".time");
+const fullscreenButton = document.querySelector(".fullscreen");
+
+playButton.addEventListener("click", togglePlay);
+progressBar.addEventListener("click", scrub);
+fullscreenButton.addEventListener("click", toggleFullscreen);
+
+let isDragging = false;
+
+function togglePlay() {
+  const method = player.paused ? "play" : "pause";
+  player[method]();
+}
+
+function updateButton() {
+  const icon = this.paused ? "►" : "❚❚";
+  playButton.textContent = icon;
+}
+
+function handleProgress() {
+  const percent = (player.currentTime / player.duration) * 100;
+  progressBar.style.flexBasis = `${percent}%`;
+  updateTimeDisplay();
+}
+
+function setTotalTime() {
+  const time = formatTime(player.duration);
+  timeDisplay.textContent = `00:00 / ${time}`;
+}
+
+function updateTimeDisplay() {
+  const time = formatTime(player.currentTime);
+  const totalTime = formatTime(player.duration);
+  timeDisplay.textContent = `${time} / ${totalTime}`;
+}
+
+function scrub(event) {
+  const scrubTime = (event.offsetX / progressBar.offsetWidth) * player.duration;
+  player.currentTime = scrubTime;
+}
+
+function formatTime(time) {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60).toString().padStart(2, "0");
+  return `${minutes}:${seconds}`;
+}
+
+function toggleFullscreen() {
+  if (!document.fullscreenElement) {
+    player.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+}
+
+function showControls() {
+  videoControls.classList.add("visible");
+  clearTimeout(timeout);
+  var timeout = setTimeout(function() {
+    videoControls.classList.remove("visible");
+  }, 2000);
+}