FInished wesbos#28

Author: smchenrybc

28 - Video Speed Controller/index-START.html

@@ -10,11 +10,44 @@
   <div class="wrapper">
     <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
     <div class="speed">
-      <div class="speed-bar">1×</div>
+      <div class="speed-bar">1.0x</div>
     </div>
   </div>
 
 <script>
+  const speed = document.querySelector('.speed');
+  const bar = speed.querySelector('.speed-bar');
+  const video = document.querySelector('.flex');
+
+  // get all properties of video DOM element:
+  // https://davidwalsh.name/javascript-attributes
+
+  function showElemAtts(elem) {
+    let atts = Array.from(elem.attributes);
+    console.log(atts);
+  }
+  // showElemAtts(video);
+
+  function handleMove(e) {
+    const y = e.pageY - this.offsetTop;
+    const decimal = y / this.offsetHeight;
+    const percent = Math.round(decimal * 100) + '%';
+
+    // playback rate vars
+    const min = 0.4;
+    const max = 4;
+    const playbackRate = decimal * (max - min) + min;
+
+    // apply styles to bar
+    bar.style.height = percent;
+    bar.textContent = playbackRate.toFixed(1) + 'x';
+
+    // apply rate to video
+    video.playbackRate = playbackRate;
+  }
+
+  speed.addEventListener('mousemove', handleMove);
 </script>
+
 </body>
 </html>

28 - Video Speed Controller/style.css

@@ -9,7 +9,7 @@ body {
   font-family: sans-serif;
 }
 .wrapper {
-  width:850px;
+  /* width:850px; */
   display:flex;
 }
 video {
@@ -36,4 +36,6 @@ video {
   padding:2px;
   color:white;
   height:16.3%;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
 }