28 finished

Author: reymon359

28 - Video Speed Controller/index.html

@@ -9,12 +9,31 @@
 
 <div class="wrapper">
     <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
+    <p>
     <div class="speed">
         <div class="speed-bar">1×</div>
     </div>
 </div>
 
 <script>
+    const speed = document.querySelector('.speed');
+    const bar = speed.querySelector('.speed-bar');
+    const video = document.querySelector('.flex');
+
+    function handleMove(e) {
+        const y = e.pageY - this.offsetTop;
+        const percent = y / this.offsetHeight;
+        const min = 0.4;
+        const max = 4;
+        const height = Math.round(percent * 100) + '%';
+        const playbackRate = percent * (max - min) + min;
+        bar.style.height = height;
+        bar.textContent = playbackRate.toFixed(2) + '×';
+        video.playbackRate = playbackRate;
+    }
+
+    speed.addEventListener('mousemove', handleMove);
+
 </script>
 </body>
 </html>