TVC/js/video.js

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);
  }
}