Skip, volume controls.

Zivi · Zivi · commit 9c5f3eaf0f39 · 2017-01-09T20:59:20.000-08:00
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -15,7 +15,7 @@
         <div class="progress__filled"></div>
        </div>
        <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="volume" class="player__slider" min="0" max="1" step="0.05" value="0.5">
        <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>
        <button data-skip="25" class="player__button">25s »</button>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -1,15 +1,37 @@
 var videoPlayer = document.getElementsByTagName('video')[0];
-var play = document.querySelector('.player__button');
-var isPlaying = false;
+var progress = document.querySelector('.progress');
+var progressFilled = document.querySelector('.progress__filled');
+var play = document.querySelector('.toggle');
+var skip25 = document.querySelector('[data-skip="25"]');
+var back10 = document.querySelector('[data-skip="-10"]');
+var volume = document.getElementsByName('volume')[0];
+var playbackRate = document.getElementsByName('playbackRate')[0];
+
+videoPlayer.volume = 0.5
+volume.onmousemove = () => {
+  videoPlayer.volume = volume.value;
+}
+
+playbackRate.onmousemove = () => {
+  videoPlayer.playbackRate = playbackRate.value;
+}
 
 play.onclick = () => {
-  if (isPlaying) {
+  if (videoPlayer.paused) {
+    videoPlayer.play();
+    videoPlayer.paused = false;
+    play.textContent = '❚❚';
+  } else {
     videoPlayer.pause();
-    isPlaying = false;
+    videoPlayer.paused = true;
     play.textContent = '►';
-  } else {
-    videoPlayer.play();
-    isPlaying = true;
-    play.textContent = '♊';
   }
 }
+
+skip25.onclick = () => {
+  videoPlayer.currentTime += 25;
+}
+
+back10.onclick = () => {
+  videoPlayer.currentTime -= 10;
+}
