JS如何實(shí)現(xiàn)簡單控制視頻播放倍速

發(fā)布時(shí)間：2021-04-19 09:42:14 來源：億速云閱讀：314 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹了JS如何實(shí)現(xiàn)簡單控制視頻播放倍速，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、成品效果

二、具體實(shí)現(xiàn)

1.HTML+CSS實(shí)現(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相對(duì)單位，相對(duì)于瀏覽器的尺寸改變*/
    background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
    background-size: cover;/*以容器為基準(zhǔn),將容器覆蓋滿,哪怕圖片失真、模糊*/
    /*margin: auto;/* margin:auto和margin:0 auto    但不知道父容器寬高，不合適*/
    display: flex;/*將容器設(shè)置為彈性容器*/
    justify-content: center;    /*在X方向居中*/
    align-items: center;        /*在Y方向居中*/         /*課外拓展：將盒子在垂直方向居中的所有方式*/
}
#wrapper{
    width: 850px;
    display: flex;
}
.speed{
    flex: 1;/*等比繼承,本來應(yīng)該是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%);    /*設(shè)置漸變色樣式*/
    display: flex;              /*使得容器可以設(shè)置接下來兩個(gè)樣式*/
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

HTML處的排版其實(shí)中規(guī)中矩，只是設(shè)置了一個(gè)用于包裝的id選擇器，然后通過video標(biāo)簽使用H5自帶的視頻播放功能，可以通過更改src來更改播放的視頻。
css處的話大家只要注意彈性盒子的使用，通過彈性容器設(shè)置了視頻的水平垂直居中

2.JS實(shí)現(xiàn)功能

代碼如下（示例）：

//1.拿到要操作的dom結(jié)構(gòu)
//2.取到鼠標(biāo)在該dom上滑動(dòng)的距離
//3.改變?cè)揹om的高度
//4.改變視頻的播放速度

//獲取對(duì)應(yīng)的dom結(jié)構(gòu)
var speed=document.querySelector('.speed')//補(bǔ)充：getElementsByClassName   都是獲取class選擇器
var bar=document.querySelector('.speed-bar')
var video=document.querySelector('.flex')

speed.addEventListener('mousemove',function(e){     //簡單來說就是指向了當(dāng)前發(fā)生的事件（click、mouseover等等），保存了當(dāng)前事件的信息。如鼠標(biāo)點(diǎn)擊事件，有鼠標(biāo)的坐標(biāo)信息。
    //console.log(e);
    var y=e.pageY-speed.offsetTop           //鼠標(biāo)在右側(cè)容器中的距離        offsetTop是獲取某個(gè)dom結(jié)構(gòu)到瀏覽器頂部的距離
    var percent = y / speed.offsetHeight    //offsetHeight是獲取某個(gè)dom結(jié)構(gòu)自身的高度
    var min = 0.4           //設(shè)置倍速極限
    var max = 4
    var playbackRate = percent * (max-min)+min      //倍速計(jì)算
    var height = Math.round(percent * 100)+'%'//Math.abs()   也是取絕對(duì)值
    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)聽鼠標(biāo)點(diǎn)擊事件       函數(shù)里面定義函數(shù)，成為回調(diào)函數(shù)

重點(diǎn)在于s處實(shí)現(xiàn)控制功能，在編寫Js版塊時(shí)，我們應(yīng)該明確自己要Js幫我們干什么

1.拿到要操作的dom結(jié)構(gòu)
2.取到鼠標(biāo)在該dom上滑動(dòng)的距離
3.改變?cè)揹om的高度
4.改變視頻的播放速度

有了目標(biāo)，我們就一個(gè)一個(gè)去實(shí)現(xiàn)它
具體實(shí)現(xiàn)可以直接看原碼，這里重點(diǎn)提一下回調(diào)函數(shù)和鼠標(biāo)控制倍速原理?？梢钥吹?br/>speed.addEventListener( " mousemove " ,function(e){)
這是個(gè)回調(diào)函數(shù)，當(dāng)mousemove發(fā)生的時(shí)候就會(huì)執(zhí)行函數(shù)function (e) tmousemove則是起到監(jiān)聽鼠標(biāo)位置的作用

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS如何實(shí)現(xiàn)簡單控制視頻播放倍速”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

JS如何實(shí)現(xiàn)簡單控制視頻播放倍速

一、成品效果

二、具體實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、成品效果

二、具體實(shí)現(xiàn)