Skip to content

Commit 0ae297b

Browse files
dashnowordsdashnowords
committed
完成了Day28的挑战，并更新了主页readme.md
1 parent d2b55db commit 0ae297b

File tree

6 files changed

+137
-2
lines changed

6 files changed

+137
-2
lines changed

‎28 - Video Speed Controller/README.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# 28 Video Speed Controller 中文指南
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 28 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-10-31
8+
最后更新：2017-11-1
9+
10+
## 挑战任务
11+
初始文档`index-start.html`中提供了一个视频播放区域（使用的是H5原生的控制器）以及一个表示播放速度的滑块区域，本次的编程任务需要实现的效果是当鼠标拖动滑块时，实时改变视频播放的速度。
12+
13+
## 实现效果
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/28%20-%20Video%20Speed%20Controller/effect.png)
15+
16+
## 编程思路
17+
本次的编程任务难度系数较低，在右侧速度条上监听鼠标点击事件，调整滑块的高度来表示不同的填充百分比，即不同的播放速度，将速度赋值给video对象的`playbackRate`属性即可实时改变播放速度。难点在于高度的百分比转换。
18+
19+
## 过程指南
20+
本篇实现较为简单，不再分步骤讲解，示例代码如下：
21+
```js
22+
const speed = document.querySelector(".speed");
23+
const speedBar = speed.querySelector(".speed-bar");
24+
const video = document.querySelector(".flex");
25+
26+
function changeSpeed(e) {
27+
const height = e.offsetY;//获取滑块的高度
28+
const percentage = e.offsetY / speed.offsetHeight;
29+
const min = 0.5;
30+
const max = 5;
31+
//依据自定义播放速度范围和滑块高度百分比确定播放速率
32+
const playbackRate = percentage * (max - min) + min;
33+
speedBar.style.height = Math.round(percentage*100) + '%';
34+
speedBar.textContent = playbackRate.toFixed(2) + '×';
35+
video.playbackRate = playbackRate;
36+
}
37+
38+
speed.addEventListener('click',changeSpeed);
39+
```
40+

‎28 - Video Speed Controller/effect.png

899 KB
Loading

‎28 - Video Speed Controller/index-finished-Dashrun.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Video Speed Scrubber</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
12+
<div class="speed">
13+
<div class="speed-bar">1×</div>
14+
</div>
15+
</div>
16+
17+
<script>
18+
const speed = document.querySelector(".speed");
19+
const speedBar = speed.querySelector(".speed-bar");
20+
const video = document.querySelector(".flex");
21+
22+
function changeSpeed(e) {
23+
const height = e.offsetY;
24+
const percentage = e.offsetY / speed.offsetHeight;
25+
const min = 0.5;
26+
const max = 5;
27+
const playbackRate = percentage * (max - min) + min;
28+
speedBar.style.height = Math.round(percentage*100) + '%';
29+
speedBar.textContent = playbackRate.toFixed(2) + '×';
30+
video.playbackRate = playbackRate;
31+
}
32+
33+
speed.addEventListener('click',changeSpeed);
34+
</script>
35+
</body>
36+
</html>

‎28 - Video Speed Controller/index-start.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Video Speed Scrubber</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
12+
<div class="speed">
13+
<div class="speed-bar">1×</div>
14+
</div>
15+
</div>
16+
17+
<script>
18+
</script>
19+
</body>
20+
</html>

‎28 - Video Speed Controller/style.css

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
margin: 0;
3+
display:flex;
4+
justify-content: center;
5+
align-items: center;
6+
min-height: 100vh;
7+
background:#4C4C4C url('https://unsplash.it/1500/900?image=1021');
8+
background-size:cover;
9+
font-family: sans-serif;
10+
}
11+
.wrapper {
12+
width:850px;
13+
display:flex;
14+
}
15+
video {
16+
box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
17+
}
18+
19+
.speed {
20+
background:#efefef;
21+
flex:1;
22+
display:flex;
23+
align-items:flex-start;
24+
margin:10px;
25+
border-radius:50px;
26+
box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
27+
overflow: hidden;
28+
}
29+
.speed-bar {
30+
width:100%;
31+
background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
32+
text-shadow:1px 1px 0 rgba(0,0,0,0.2);
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
padding:2px;
37+
color:white;
38+
height:16.3%;
39+
}

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ No | Guide | Demo
6666
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)
6767
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)
6868
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)
69-
27 | Click and Drag | -
69+
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)
7070
28 | Video Speed Controller | -
7171
29 | Countdown Timer | -
7272
30 | Whack A Mole | -
@@ -80,7 +80,7 @@ Name | Contribution
8080
[@DrakeXiang](https://github.com/DrakeXiang) | No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
8181
[@zzh466](http://github.com/zzh466) | Review
8282
[@Xing Liu](https://github.com/S1ngS1ng) | Review
83-
[@大史快跑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)
83+
[@大史快跑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)
8484
[@缉熙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)
8585

8686
## JOIN US

0 commit comments

Comments
 (0)