引言
之前就發現一個問題:有時候看一些學習視頻，總是嫌它動作太慢，老師黑板上寫板書很浪費時間，要是控制合適倍速播放，這樣既能提升學習效率，也能讓自己看著舒服點。所以我就學著寫了下面這個網頁，通過Html+CSS+JavaScript實現。
提示：以下是本篇文章正文內容，下面案例可供參考
一、成品效果
二、具體實現
1.HTML+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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css" rel="external nofollow" > <title>視頻播放</title> </head><body> <div id="wrapper"> <video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex"></video> <div class="speed"> <div class="speed-bar">1x</div> </div> </div> <script src="./index.js"></script></body></html> |
|
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
|
*{ margin: 0; padding: 0;}body{ min-height: 100vh;/* vh相對單位，相對于瀏覽器的尺寸改變*/ background: #4c4c4c url('https://unsplash.it/1500/900?image=1021'); background-size: cover;/*以容器為基準,將容器覆蓋滿,哪怕圖片失真、模糊*/ /*margin: auto;/* margin:auto和margin:0 auto 但不知道父容器寬高，不合適*/ display: flex;/*將容器設置為彈性容器*/ justify-content: center; /*在X方向居中*/ align-items: center; /*在Y方向居中*/ /*課外拓展：將盒子在垂直方向居中的所有方式*/}#wrapper{ width: 850px; display: flex;}.speed{ flex: 1;/*等比繼承,本來應該是1:1繼承，但是vedio有固定寬度，所以speed拿剩下寬度*/ margin: 10px; background-color: #fff; border-radius: 50px; display: flex; overflow: hidden;/*起到：規定子容器不能超出，能保持父類圓角效果*/ align-items: flex-start;/* */}.speed-bar{ width: 100%; height: 16.3%; background:linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%); /*設置漸變色樣式*/ display: flex; /*使得容器可以設置接下來兩個樣式*/ justify-content: center; align-items: center; color: #fff; cursor: pointer;} |
HTML處的排版其實中規中矩，只是設置了一個用于包裝的id選擇器，然后通過video標簽使用H5自帶的視頻播放功能，可以通過更改src來更改播放的視頻。
css處的話大家只要注意彈性盒子的使用，通過彈性容器設置了視頻的水平垂直居中
2.JS實現功能
代碼如下（示例）：
|
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
|
//1.拿到要操作的dom結構//2.取到鼠標在該dom上滑動的距離//3.改變該dom的高度//4.改變視頻的播放速度//獲取對應的dom結構var speed=document.querySelector('.speed')//補充：getElementsByClassName 都是獲取class選擇器var bar=document.querySelector('.speed-bar')var video=document.querySelector('.flex')speed.addEventListener('mousemove',function(e){ //簡單來說就是指向了當前發生的事件（click、mouseover等等），保存了當前事件的信息。如鼠標點擊事件，有鼠標的坐標信息。 //console.log(e); var y=e.pageY-speed.offsetTop //鼠標在右側容器中的距離 offsetTop是獲取某個dom結構到瀏覽器頂部的距離 var percent = y / speed.offsetHeight //offsetHeight是獲取某個dom結構自身的高度 var min = 0.4 //設置倍速極限 var max = 4 var playbackRate = percent * (max-min)+min //倍速計算 var height = Math.round(percent * 100)+'%'//Math.abs() 也是取絕對值 bar.textContent = playbackRate.toFixed(2)+'×' //改變dom里面的文本內容 toFixed(x) 保留x位小數 video.playbackRate = playbackRate //調整video的播放倍速 bar.style.height = height //調整倍數文本的顯示高度})//注：函數的倆參數作用分別為：監聽鼠標點擊事件 函數里面定義函數，成為回調函數 |
重點在于s處實現控制功能，在編寫Js版塊時，我們應該明確自己要Js幫我們干什么
1.拿到要操作的dom結構
2.取到鼠標在該dom上滑動的距離
3.改變該dom的高度
4.改變視頻的播放速度
有了目標，我們就一個一個去實現它
具體實現可以直接看原碼，這里重點提一下回調函數和鼠標控制倍速原理。可以看到
speed.addEventListener( " mousemove " ,function(e){)
這是個回調函數，當mousemove發生的時候就會執行函數function (e) tmousemove則是起到監聽鼠標位置的作用
到此這篇關于通過JS來實現簡單控制視頻播放倍速的文章就介紹到這了,更多相關js視頻播放倍速內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_46018462/article/details/115787274
