Ex28 - Video Speed Controller

fthebaud · fthebaud · commit e212b8970c4f · 2017-01-19T16:24:15.000+01:00
diff --git a/28 - Video Speed Controller/index.html b/28 - Video Speed Controller/index.html
@@ -0,0 +1,22 @@
+<!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 src="script.js" charset="utf-8"></script>
+  
+</body>
+
+</html>
diff --git a/28 - Video Speed Controller/script.js b/28 - Video Speed Controller/script.js
@@ -0,0 +1,24 @@
+'use strict';
+
+const speed = document.querySelector('.speed');
+const bar = speed.querySelector('.speed-bar');
+const video = document.querySelector('.flex');
+
+function speedo(event) {
+  const y = event.pageY - this.offsetTop; // -offsetTop car on veut que l'origine (0,0), soit notre �l�ment, pas la page
+  const percent = y / this.offsetHeight;
+  const height = Math.round(percent * 100) + '%';
+  bar.style.height = height;
+
+  const min = 0.4;
+  const max = 4;
+  // (n - 0.4) / (4 - 0.4) = percent
+  // (n - min) / (max - min) = percent
+  // n - min = percent * (max - min)
+  const playbackRate = percent * (max - min) + min;
+  bar.textContent = playbackRate.toFixed(2);
+
+  video.playbackRate = playbackRate;
+}
+
+speed.addEventListener('mousemove', speedo);
