文章目錄
- 引言
- 一、成品效果
- 二、具體實作
- 1.HTML+CSS實作簡單布局
- 2.JS實作功能
- 總結
引言
之前就發現一個問題:有時候看一些學習視頻，總是嫌它動作太慢，老師黑板上寫板書很浪費時間，要是控制合適倍速播放，這樣既能提升學習效率，也能讓自己看著舒服點，所以我就學著寫了下面這個網頁，通過Html+CSS+JavaScript實作，
提示：以下是本篇文章正文內容，下面案例可供參考
一、成品效果
二、具體實作
1.HTML+CSS實作簡單布局
代碼如下（示例）：
<!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">
<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>
*{
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.拿到要操作的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則是起到監聽滑鼠位置的作用
總結
以上就是今天要講的內容，本文僅僅簡單展示了使用網頁實作視頻的倍速播放，該文為筆者第一次發文，歡迎大家互相交流，若有錯誤之處，還望讀者指出，希望本文對你有所幫助，轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277348.html
標籤：其他
上一篇：JS 基礎面試題