28 - Video Speed Controller
俗話說的好，一天一蘋果，醫生遠離我
一天一 JS，What the f*ck JavaScript？
small steps every day - 記錄著新手村日記
完成目標
- 功能
- 畫面
- 拖拉 Range 可以顯示目前的速度倍率（格式：nx）
index_START.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
|
Style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| 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%;
}
|
JS - step by step
首先，我們先將需要的元素選取起來，分別要整個調整速度的元件、調整速度內的Bar及當調整Bar的數值會影響到左側Video的播放速度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
console.log(speed)
console.log(bar)
console.log(video)
</script>
|
再來加上個監聽事件吧～每當滑鼠調整Bar的數值會觸發事件 handleMove
1
2
3
4
5
6
7
8
9
10
11
| <script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
console.log(e);
}
speed.addEventListener('mousemove', handleMove);
</script>
|
現在來取得控制器背景元素中的 Y 軸位置、整體高度吧！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const playbackRate = percent * (max - min) + min;
}
speed.addEventListener('mousemove', handleMove);
</script>
|
最後只要指定控制器的顯示高度、文字內容，還有左側的影片的播放速度就可以調整惹w
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
const height = Math.round(percent * 100) + '%';
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
</script>
|
就大功告成啦！
JS - final
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
const height = Math.round(percent * 100) + '%';
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
</script>
|
本刊同步於個人網站：http://chestertang.site/
本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n