soyaine · soyaine · Nov 1, 2017 · Nov 1, 2017
diff --git a/28 - Video Speed Controller/README.md b/28 - Video Speed Controller/README.md
@@ -0,0 +1,40 @@
+# 28 Video Speed Controller 中文指南
+
+> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+
+> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 28 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
+
+> 创建时间：2017-10-31   
+最后更新：2017-11-1
+
+## 挑战任务
+初始文档`index-start.html`中提供了一个视频播放区域（使用的是H5原生的控制器）以及一个表示播放速度的滑块区域，本次的编程任务需要实现的效果是当鼠标拖动滑块时，实时改变视频播放的速度。
+
+## 实现效果
+![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/28%20-%20Video%20Speed%20Controller/effect.png)
+
+## 编程思路  
+本次的编程任务难度系数较低，在右侧速度条上监听鼠标点击事件，调整滑块的高度来表示不同的填充百分比，即不同的播放速度，将速度赋值给video对象的`playbackRate`属性即可实时改变播放速度。难点在于高度的百分比转换。
+
+## 过程指南   
+本篇实现较为简单，不再分步骤讲解，示例代码如下：
+```js
+  const speed = document.querySelector(".speed");
+  const speedBar = speed.querySelector(".speed-bar");
+  const video = document.querySelector(".flex");
+
+  function changeSpeed(e) {
+    const height = e.offsetY;//获取滑块的高度
+    const percentage = e.offsetY / speed.offsetHeight;
+    const min = 0.5;
+    const max = 5;
+    //依据自定义播放速度范围和滑块高度百分比确定播放速率
+    const playbackRate = percentage * (max - min) + min; 
+    speedBar.style.height = Math.round(percentage*100) + '%';
+    speedBar.textContent = playbackRate.toFixed(2) + '×';
+    video.playbackRate = playbackRate;
+  }
+
+  speed.addEventListener('click',changeSpeed);
+```
+
diff --git a/28 - Video Speed Controller/effect.png b/28 - Video Speed Controller/effect.png
diff --git a/28 - Video Speed Controller/index-finished-Dashrun.html b/28 - Video Speed Controller/index-finished-Dashrun.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="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
+    <div class="speed">
+      <div class="speed-bar">1×</div>
+    </div>
+  </div>
+
+<script>
+  const speed = document.querySelector(".speed");
+  const speedBar = speed.querySelector(".speed-bar");
+  const video = document.querySelector(".flex");
+
+  function changeSpeed(e) {
+    const height = e.offsetY;
+    const percentage = e.offsetY / speed.offsetHeight;
+    const min = 0.5;
+    const max = 5;
+    const playbackRate = percentage * (max - min) + min;
+    speedBar.style.height = Math.round(percentage*100) + '%';
+    speedBar.textContent = playbackRate.toFixed(2) + '×';
+    video.playbackRate = playbackRate;
+  }
+
+  speed.addEventListener('click',changeSpeed);
+</script>
+</body>
+</html>
diff --git a/28 - Video Speed Controller/index-start.html b/28 - Video Speed Controller/index-start.html
@@ -0,0 +1,20 @@
+<!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="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
+    <div class="speed">
+      <div class="speed-bar">1×</div>
+    </div>
+  </div>
+
+<script>
+</script>
+</body>
+</html>
diff --git a/28 - Video Speed Controller/style.css b/28 - Video Speed Controller/style.css
@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background:#4C4C4C url('https://unsplash.it/1500/900?image=1021');
+  background-size:cover;
+  font-family: sans-serif;
+}
+.wrapper {
+  width:850px;
+  display:flex;
+}
+video {
+  box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.speed {
+  background:#efefef;
+  flex:1;
+  display:flex;
+  align-items:flex-start;
+  margin:10px;
+  border-radius:50px;
+  box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+.speed-bar {
+  width:100%;
+  background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
+  text-shadow:1px 1px 0 rgba(0,0,0,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding:2px;
+  color:white;
+  height:16.3%;
+}
diff --git a/README.md b/README.md
@@ -66,7 +66,7 @@ No | Guide | Demo
 24 | [Sticky Nav指南](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/README.md) | [Sticky Nav效果](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/index-finished-Dashrun.html)  
 25 | [Event Related指南](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/README.md) | [Event Related效果](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/index-finished-Dashrun.html)   
 26 | [Stripe Follow Along Nav指南](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md) | [Strip Follow Along Nav效果](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/index-finished-Dashrun.html)   
-27 | Click and Drag | -   
+27 | [Click and Drag指南](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/README.md) | [Click and Drag效果](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/index-finished-Dashrun.html)   
 28 | Video Speed Controller |  -  
 29 | Countdown Timer |  -  
 30 | Whack A Mole | -   
@@ -80,7 +80,7 @@ Name | Contribution
 [@DrakeXiang](https://github.com/DrakeXiang) |  No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
 [@zzh466](http://github.com/zzh466) | Review
 [@Xing Liu](https://github.com/S1ngS1ng) | Review
-[@大史快跑Dashrun](https://github.com/dashrun) |  No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav)
+[@大史快跑Dashrun](https://github.com/dashrun) |  No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag)
 [@缉熙Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
 
 ## JOIN US