28 done

goodmanship · goodmanship · commit b4cf5a94e7e3 · 2017-05-08T21:59:55.000-07:00
diff --git a/28 - Video Speed Controller/index-RIO.html b/28 - Video Speed Controller/index-RIO.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Video Speed Scrubber</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="wrapper">
+    <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
+    <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 pct = (e.pageY - this.offsetTop) / this.offsetHeight
+    const min = 0.4
+    const max = 3
+    const height = Math.round(pct*100) + '%'
+    bar.style.height = height
+    const playbackRate = (min + (max - min) * pct)  .toFixed(1)
+    bar.textContent = playbackRate + 'x'
+    video.playbackRate = playbackRate
+  }
+
+  speed.addEventListener('mousemove', handleMove)
+</script>
+</body>
+</html>
