You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
class VideoPlayer {
|
|
constructor() {
|
|
this.video = document.getElementById("video");
|
|
|
|
this.enableCustomControls();
|
|
}
|
|
|
|
updateVideoDuration() {
|
|
this.videoDuration = Math.round(this.video.duration);
|
|
|
|
const seek = document.getElementById("seek");
|
|
seek.setAttribute("max", this.videoDuration);
|
|
seek.value = 0;
|
|
const progressBar = document.getElementById("progress-bar");
|
|
progressBar.setAttribute("max", this.videoDuration);
|
|
}
|
|
|
|
enableCustomControls() {
|
|
const video = document.getElementById("video");
|
|
const videoControls = document.getElementById("video-controls");
|
|
|
|
const videoWorks = !!document.createElement("video").canPlayType;
|
|
if (videoWorks) {
|
|
video.controls = false;
|
|
videoControls.classList.remove("hidden");
|
|
}
|
|
}
|
|
// Posouvání ve videu
|
|
skipAhead(skipTo) {
|
|
const progressBar = document.getElementById("progress-bar");
|
|
const video = document.getElementById("video");
|
|
|
|
video.currentTime = skipTo;
|
|
progressBar.value = skipTo;
|
|
}
|
|
// Aktualizování progress baru
|
|
updateProgress() {
|
|
const seek = document.getElementById("seek");
|
|
const progressBar = document.getElementById("progress-bar");
|
|
|
|
seek.value = Math.floor(this.video.currentTime);
|
|
progressBar.value = Math.floor(this.video.currentTime);
|
|
|
|
if (this.video.currentTime == this.videoDuration) {
|
|
this.showButton();
|
|
console.log("here");
|
|
}
|
|
}
|
|
updateVolume() {
|
|
const volume = document.getElementById("volume");
|
|
const volumeBar = document.getElementById("volume-bar-value");
|
|
|
|
if (video.muted) {
|
|
video.muted = false;
|
|
}
|
|
|
|
video.volume = volume.value / 100;
|
|
volumeBar.style.width = volume.value + "%";
|
|
}
|
|
// Play pause
|
|
togglePlay() {
|
|
if (this.video.paused || this.video.ended) {
|
|
this.video.play();
|
|
this.showButton();
|
|
} else {
|
|
this.video.pause();
|
|
this.showButton();
|
|
}
|
|
}
|
|
// Zobrazenení a změna tlačítka k přehrávání
|
|
showButton() {
|
|
let playButton = document.getElementById("togglePlayIcon");
|
|
|
|
if (this.video.ended) {
|
|
playButton.setAttribute("src", "./img/play.svg");
|
|
playButton.style.removeProperty("display");
|
|
} else if (this.video.paused) {
|
|
playButton.setAttribute("src", "./img/pause.svg");
|
|
playButton.style.removeProperty("display");
|
|
} else {
|
|
playButton.style.display = "none";
|
|
}
|
|
}
|
|
getVideoDuration() {
|
|
return Math.round(this.video.duration);
|
|
}
|
|
}
|