WIP video

Author: Justin Ramel

11 - Custom Video Player/index.html

@@ -14,7 +14,7 @@
        <div class="progress">
         <div class="progress__filled"></div>
        </div>
-       <button class="player__button toggle" title="Toggle Play">►</button>
+       <button class="player__button toggle" title="Toggle Play">▶️</button>
        <input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>

11 - Custom Video Player/scripts.js

@@ -0,0 +1,36 @@
+const player = document.querySelector('.player')
+const video =  player.querySelector('video')
+const progress = player.querySelector('.progress')
+const progressBar = player.querySelector('.progress__filled')
+const toggle = player.querySelector('.toggle')
+const skipButtons = player.querySelectorAll('[data-skip]')
+const ranges = player.querySelectorAll('.player__slider')
+
+function togglePlay () {
+  if (video.paused) {
+    video.play()
+  } else {
+    video.pause()
+  }
+}
+
+function skip () {
+  const seconds = Number(this.dataset.skip)
+  video.currentTime += seconds
+}
+
+function updatePlayButton () {
+  toggle.innerHTML = this.paused ? '▶️' : '⏸'
+}
+
+function updateRange () {
+  const attribute = this.getAttribute('name')
+  video[attribute] = Number(this.value)
+}
+
+video.addEventListener('click', togglePlay)
+video.addEventListener('play', updatePlayButton)
+video.addEventListener('pause', updatePlayButton)
+toggle.addEventListener('click', togglePlay)
+skipButtons.forEach(btn => btn.addEventListener('click', skip))
+ranges.forEach(range => range.addEventListener('click', updateRange))