diff --git a/28 - Video Speed Controller/README.md b/28 - Video Speed Controller/README.md
new file mode 100644
index 0000000..04e24be
--- /dev/null
+++ 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原生的控制器）以及一个表示播放速度的滑块区域，本次的编程任务需要实现的效果是当鼠标拖动滑块时，实时改变视频播放的速度。
+
+## 实现效果
+
+
+## 编程思路
+本次的编程任务难度系数较低，在右侧速度条上监听鼠标点击事件，调整滑块的高度来表示不同的填充百分比，即不同的播放速度，将速度赋值给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
new file mode 100644
index 0000000..11edb2a
Binary files /dev/null and b/28 - Video Speed Controller/effect.png differ
diff --git a/28 - Video Speed Controller/index-finished-Dashrun.html b/28 - Video Speed Controller/index-finished-Dashrun.html
new file mode 100644
index 0000000..2f72d09
--- /dev/null
+++ b/28 - Video Speed Controller/index-finished-Dashrun.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Video Speed Scrubber
+
+
+
+
+
+
+
+
+
diff --git a/28 - Video Speed Controller/index-start.html b/28 - Video Speed Controller/index-start.html
new file mode 100644
index 0000000..8bd536b
--- /dev/null
+++ b/28 - Video Speed Controller/index-start.html
@@ -0,0 +1,20 @@
+
+
+
+
+ Video Speed Scrubber
+
+
+
+
+
+
+
+
+
diff --git a/28 - Video Speed Controller/style.css b/28 - Video Speed Controller/style.css
new file mode 100644
index 0000000..dbd8b28
--- /dev/null
+++ 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
index 8575ede..3b1775f 100644
--- 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