Delete player.js
Browse files
player.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
| 1 |
-
const player = document.getElementById("player");
|
| 2 |
-
const videoControls = document.querySelector(".controls");
|
| 3 |
-
|
| 4 |
-
player.addEventListener("click", togglePlay);
|
| 5 |
-
player.addEventListener("play", updateButton);
|
| 6 |
-
player.addEventListener("pause", updateButton);
|
| 7 |
-
player.addEventListener("timeupdate", handleProgress);
|
| 8 |
-
player.addEventListener("loadedmetadata", setTotalTime);
|
| 9 |
-
player.addEventListener("mousemove", showControls);
|
| 10 |
-
|
| 11 |
-
const playButton = document.querySelector(".play");
|
| 12 |
-
const progressBar = document.querySelector(".progress-filled");
|
| 13 |
-
const timeDisplay = document.querySelector(".time");
|
| 14 |
-
const fullscreenButton = document.querySelector(".fullscreen");
|
| 15 |
-
|
| 16 |
-
playButton.addEventListener("click", togglePlay);
|
| 17 |
-
progressBar.addEventListener("click", scrub);
|
| 18 |
-
fullscreenButton.addEventListener("click", toggleFullscreen);
|
| 19 |
-
|
| 20 |
-
let isDragging = false;
|
| 21 |
-
|
| 22 |
-
function togglePlay() {
|
| 23 |
-
const method = player.paused ? "play" : "pause";
|
| 24 |
-
player[method]();
|
| 25 |
-
}
|
| 26 |
-
|
| 27 |
-
function updateButton() {
|
| 28 |
-
const icon = this.paused ? "►" : "❚❚";
|
| 29 |
-
playButton.textContent = icon;
|
| 30 |
-
}
|
| 31 |
-
|
| 32 |
-
function handleProgress() {
|
| 33 |
-
const percent = (player.currentTime / player.duration) * 100;
|
| 34 |
-
progressBar.style.flexBasis = `${percent}%`;
|
| 35 |
-
updateTimeDisplay();
|
| 36 |
-
}
|
| 37 |
-
|
| 38 |
-
function setTotalTime() {
|
| 39 |
-
const time = formatTime(player.duration);
|
| 40 |
-
timeDisplay.textContent = `00:00 / ${time}`;
|
| 41 |
-
}
|
| 42 |
-
|
| 43 |
-
function updateTimeDisplay() {
|
| 44 |
-
const time = formatTime(player.currentTime);
|
| 45 |
-
const totalTime = formatTime(player.duration);
|
| 46 |
-
timeDisplay.textContent = `${time} / ${totalTime}`;
|
| 47 |
-
}
|
| 48 |
-
|
| 49 |
-
function scrub(event) {
|
| 50 |
-
const scrubTime = (event.offsetX / progressBar.offsetWidth) * player.duration;
|
| 51 |
-
player.currentTime = scrubTime;
|
| 52 |
-
}
|
| 53 |
-
|
| 54 |
-
function formatTime(time) {
|
| 55 |
-
const minutes = Math.floor(time / 60);
|
| 56 |
-
const seconds = Math.floor(time % 60).toString().padStart(2, "0");
|
| 57 |
-
return `${minutes}:${seconds}`;
|
| 58 |
-
}
|
| 59 |
-
|
| 60 |
-
function toggleFullscreen() {
|
| 61 |
-
if (!document.fullscreenElement) {
|
| 62 |
-
player.requestFullscreen();
|
| 63 |
-
} else {
|
| 64 |
-
document.exitFullscreen();
|
| 65 |
-
}
|
| 66 |
-
}
|
| 67 |
-
|
| 68 |
-
function showControls() {
|
| 69 |
-
videoControls.classList.add("visible");
|
| 70 |
-
clearTimeout(timeout);
|
| 71 |
-
var timeout = setTimeout(function() {
|
| 72 |
-
videoControls.classList.remove("visible");
|
| 73 |
-
}, 2000);
|
| 74 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|