Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c2d79bd

Browse files
authored
Merge pull request soyaine#37 from dashrun/master
2 parents f494a3e + 0ae297b commit c2d79bd

File tree

6 files changed

+137
-2
lines changed

6 files changed

+137
-2
lines changed
Lines changed: 40 additions & 0 deletions
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+
899 KB
Loading[フレーム]
Lines changed: 36 additions & 0 deletions
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">×ばつ</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>
Lines changed: 20 additions & 0 deletions
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">×ばつ</div>
14+
</div>
15+
</div>
16+
17+
<script>
18+
</script>
19+
</body>
20+
</html>
Lines changed: 39 additions & 0 deletions
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‎

Lines changed: 2 additions & 2 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /