zprovoznění přehrávače

js/video.js

@@ -0,0 +1,112 @@
+class VideoPlayer {
+  constructor() {
+    this.video = document.getElementById("video");
+
+    this.video.addEventListener(
+      "loadedmetadata",
+      function () {
+        this.init();
+      }.bind(this)
+    );
+  }
+  // Init
+  init() {
+    this.enableCustomControls();
+    this.addEventListeners();
+
+    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);
+  }
+  // Přidání listenerů
+  addEventListeners() {
+    const videoControls = document.getElementById("video-controls");
+    const togleButton = document.getElementById("togglePlayIcon");
+    videoControls.addEventListener(
+      "click",
+      function (e) {
+        if (e.target !== videoControls && e.target !== togleButton) {
+          return;
+        }
+        this.togglePlay();
+      }.bind(this)
+    );
+
+    this.video.addEventListener(
+      "timeupdate",
+      function () {
+        this.updateProgress();
+      }.bind(this)
+    );
+    this.video.addEventListener(
+      "ended",
+      function () {
+        this.showButton();
+      }.bind(this)
+    );
+
+    const seek = document.getElementById("seek");
+    seek.addEventListener("input", this.skipAhead);
+  }
+  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() {
+    const progressBar = document.getElementById("progress-bar");
+    video = document.getElementById("video");
+
+    let skipTo = this.value;
+
+    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");
+    }
+  }
+  // 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";
+    }
+  }
+}