JS實現(xiàn)簡單控制視頻播放倍速的實例代碼
更新時間：2021年04月18日 12:02:49 作者：Treasure map
這篇文章主要介紹了通過JS來實現(xiàn)簡單控制視頻播放倍速,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
引言
之前就發(fā)現(xiàn)一個問題:有時候看一些學習視頻，總是嫌它動作太慢，老師黑板上寫板書很浪費時間，要是控制合適倍速播放，這樣既能提升學習效率，也能讓自己看著舒服點。所以我就學著寫了下面這個網(wǎng)頁，通過Html+CSS+JavaScript實現(xiàn)。
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、成品效果
二、具體實現(xiàn)
1.HTML+CSS實現(xiàn)簡單布局
代碼如下（示例）：
<!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>
*{
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;/*起到：規(guī)定子容器不能超出，能保持父類圓角效果*/
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處的排版其實中規(guī)中矩，只是設置了一個用于包裝的id選擇器，然后通過video標簽使用H5自帶的視頻播放功能，可以通過更改src來更改播放的視頻。
css處的話大家只要注意彈性盒子的使用，通過彈性容器設置了視頻的水平垂直居中
2.JS實現(xiàn)功能
代碼如下（示例）：
//1.拿到要操作的dom結(jié)構(gòu)
//2.取到鼠標在該dom上滑動的距離
//3.改變該dom的高度
//4.改變視頻的播放速度
//獲取對應的dom結(jié)構(gòu)
var speed=document.querySelector('.speed')//補充：getElementsByClassName 都是獲取class選擇器
var bar=document.querySelector('.speed-bar')
var video=document.querySelector('.flex')
speed.addEventListener('mousemove',function(e){ //簡單來說就是指向了當前發(fā)生的事件（click、mouseover等等），保存了當前事件的信息。如鼠標點擊事件，有鼠標的坐標信息。
//console.log(e);
var y=e.pageY-speed.offsetTop //鼠標在右側(cè)容器中的距離 offsetTop是獲取某個dom結(jié)構(gòu)到瀏覽器頂部的距離
var percent = y / speed.offsetHeight //offsetHeight是獲取某個dom結(jié)構(gòu)自身的高度
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里面的文本內(nèi)容 toFixed(x) 保留x位小數(shù)
video.playbackRate = playbackRate //調(diào)整video的播放倍速
bar.style.height = height //調(diào)整倍數(shù)文本的顯示高度
})
//注：函數(shù)的倆參數(shù)作用分別為：監(jiān)聽鼠標點擊事件 函數(shù)里面定義函數(shù)，成為回調(diào)函數(shù)
重點在于s處實現(xiàn)控制功能，在編寫Js版塊時，我們應該明確自己要Js幫我們干什么
1.拿到要操作的dom結(jié)構(gòu)
2.取到鼠標在該dom上滑動的距離
3.改變該dom的高度
4.改變視頻的播放速度
有了目標，我們就一個一個去實現(xiàn)它
具體實現(xiàn)可以直接看原碼，這里重點提一下回調(diào)函數(shù)和鼠標控制倍速原理?？梢钥吹?br />
speed.addEventListener( " mousemove " ,function(e){)
這是個回調(diào)函數(shù)，當mousemove發(fā)生的時候就會執(zhí)行函數(shù)function (e) tmousemove則是起到監(jiān)聽鼠標位置的作用
到此這篇關于通過JS來實現(xiàn)簡單控制視頻播放倍速的文章就介紹到這了,更多相關js視頻播放倍速內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
document.getElementByName方法沒有document.getElementsByName得到的是標簽的數(shù)組，下面為大家詳細介紹下具體的使用，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
5個javascript的數(shù)字格式化函數(shù)分享
Javascript沒有任何內(nèi)建的格式化函數(shù)，這里我們通過Google收集了5個javascript的數(shù)字格式化函數(shù)，希望對于大家的web開發(fā)能夠帶來方便2011-12-12
這篇文章主要介紹了鼠標滾軸控制文本框值的JS代碼，有需要的朋友可以參考一下2013-11-11
webstorm調(diào)試uniapp程序的簡單步驟記錄
這篇文章主要給大家介紹了關于webstorm調(diào)試uniapp程序的簡單步驟,文中通過圖文介紹的非常詳細,對大家學習或者使用webstorm具有一定的參考借鑒價值,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細介紹了在前端開發(fā)中,常見的跨域解決方案,文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下2023-09-09
javascript中parseInt()函數(shù)的定義和用法分析
這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時的注意事項,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了如何在JavaScript中使用for循環(huán),通過使用JavaScript?for...in循環(huán)，我們可以循環(huán)對象的鍵或?qū)傩?，在迭代對象屬性或進行調(diào)試時，它可能很有用，但在迭代數(shù)組或?qū)ο筮M行修改時，應該避免使用for...in循環(huán)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JavaScript中的迭代器和生成器詳解,本文講解了迭代器、聲明自定義迭代器、生成器：一種更好的方式來構(gòu)建迭代器、生成器高級特性等內(nèi)容,需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細介紹了微信小程序日期時間選擇器的使用方法，自定義精確到分秒或時段，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
JavaScript函數(shù)調(diào)用經(jīng)典實例代碼
JavaScript提供了4種函數(shù)調(diào)用,一般形式的函數(shù)調(diào)用、作為對象的方法調(diào)用、使用 call 和 apply 動態(tài)調(diào)用、使用 new 間接調(diào)用,下面這篇文章主要給大家介紹了關于JavaScript函數(shù)調(diào)用的相關資料,需要的朋友可以參考下2021-12-12