用JS制作可交互的視頻進度條的案例分享

更新時間：2024年04月19日 11:34:42 作者：呆同學(xué)

這篇文章主要介紹了用JS制作可交互的視頻進度條的案例,在開始制作視頻進度條之前,想先給大家補充一些關(guān)于元素的一些特點和用法,為大家更好地理解接下來的分享,感興趣的朋友可以參考下

前言

在開始制作視頻進度條之前，想先給大家補充一些關(guān)于元素的一些特點和用法，為大家更好地理解接下來的分享。

塊級元素

特點：

塊級元素會默認占據(jù)一整行，每個元素都會從新的一行開始，并且盡可能撐滿其父元素的寬度。

可以設(shè)置寬度（width）、高度（height）、內(nèi)邊距（padding）、外邊距（margin）等屬性。

常見的塊級元素有 <div>、<p>、<h1> 到 <h6>、<ul>、<li> 等。

行內(nèi)塊級元素

特點：

行內(nèi)塊級元素不會默認占據(jù)一整行，它們可以在一行內(nèi)并排顯示，但可以設(shè)置寬度和高度。

可以設(shè)置寬度、高度、內(nèi)邊距和外邊距等屬性。

常見的行內(nèi)塊級元素有 <span>、<img>、<input> 等。

常見的塊級元素，例如 <a> 和 <button>，如果設(shè)置了 display: inline-block; 樣式，也會變成行內(nèi)塊級元素。

行內(nèi)元素

特點：

行內(nèi)元素不會默認占據(jù)一整行，它們會在同一行內(nèi)顯示，并且會盡量不破壞當前文檔流。

不能設(shè)置寬度和高度，設(shè)置的話也不會生效。

常見的行內(nèi)元素有 <span>、<a>、<strong>、<em>、<img> 等。

行內(nèi)元素通常用于包裹文本或其他行內(nèi)元素，并且不會破壞文本的連續(xù)性。

在設(shè)計控制視頻進度條的布局時，你可以根據(jù)這些元素的特點來選擇合適的元素類型，并結(jié)合 CSS 樣式來實現(xiàn)你的設(shè)計。那么接下來，開干！

第一部分：HTML

<body>
    <div class="wrapper">
        <video src="./mv.mp4" width="765" height="430" controls class="video"></video>

        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>

<script src="./index.js"></script>
</body>

<video> 元素，用于在網(wǎng)頁上嵌入視頻。src="./mv.mp4" 屬性指定視頻文件的路徑，大家自行準備任意視頻文件。controls 屬性表示顯示視頻控制條，使用戶可以播放、暫停、調(diào)整音量等。
<script src="./index.js"></script>: 引入 JavaScript 文件。后面有JS部分代碼，必須引入。

第二部分：CSS樣式

* {
    /* 外邊距 */
    margin: 0;
    /* 內(nèi)邊距 */
    padding: 0;
}

這是一個通用選擇器，用于將所有元素的外邊距和內(nèi)邊距都設(shè)置為 0。

.wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

position: fixed;這個屬性將 .wrapper 元素的定位方式設(shè)置為固定定位。當一個元素被設(shè)置為固定定位時，它會相對于瀏覽器窗口的視口進行定位，而不是相對于文檔流中的其他元素。
left: 50%; top: 50%;這兩個屬性將 .wrapper 元素的左邊緣和頂部邊緣分別定位在視口的水平中心和垂直中心。設(shè)置為 50% 表示元素的左邊緣和頂部邊緣距離視口左邊緣和頂部邊緣各自的距離為視口寬度和高度的一半。
transform: translate(-50%, -50%); translate(-50%, -50%) 函數(shù)將 .wrapper 元素沿著 X 軸和 Y 軸方向分別向左和向上移動自身的寬度和高度的一半。這個技巧通常用于將一個元素水平和垂直居中顯示，特別是當元素的寬度和高度是不確定的情況下。
display: flex;這個屬性將 .wrapper 元素的顯示方式設(shè)置為 Flex 布局。 Flex 布局提供了一種更靈活的方式來布局和排列元素，可以輕松實現(xiàn)水平和垂直居中以及等分布局等效果。

.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    display: inline;
    border-radius: 50px;
    overflow: hidden;
}

.speed-bar {
    width: 100%;
    height: 16%;
    background: linear-gradient(to bottom, #2376ae, #c16ecf);
    display: flex;
    justify-content: center; 
    align-items: center;
    cursor: pointer;
}

display: inline;: 將速度控制條容器設(shè)置為內(nèi)聯(lián)元素。在上面的補充內(nèi)容中我們具體提到過。
border-radius: 50px;: 設(shè)置速度控制條容器的邊框半徑為 50px，使其呈現(xiàn)圓形外觀。
overflow: hidden;: 當速度控制條內(nèi)容溢出容器時，隱藏溢出部分。

第三部分：JavaScript

//獲取白底容器
//在白色容器上監(jiān)聽鼠標的移動事件
//獲取鼠標移動的距離
//根據(jù)鼠標移動的距離來設(shè)計彩色容器的高度

var speed = document.querySelector('.speed')
var speedBar = document.querySelector('.speed-bar')
var video = document.querySelector('.video')

speed.addEventListener('mousemove', function(e) {
    console.log(e.pageY);
    //offsetTop容器到瀏覽器頂部的距離
    var y = e.pageY - speed.getBoundingClientRect().top
    var percent = y / speed.offsetHeight 
    var height = Math.round(percent * 100) + '%'
    //用js修改speed-bar容器的高度
    speedBar.style.height = height

    var min = 0.4
    var max = 4
    var playSpeed = percent * (max - min) + min
    
    speedBar.textContent = playSpeed.toFixed(2) + 'x'
    video.playbackRate = playSpeed
})

這段 JavaScript 代碼監(jiān)聽了速度控制條容器（.speed）上的鼠標移動事件，并根據(jù)鼠標在容器內(nèi)的垂直位置來動態(tài)調(diào)整彩色容器（.speed-bar）的高度和視頻的播放速度。讓我逐步解釋代碼的作用：

var speed = document.querySelector('.speed')獲取速度控制條容器的 '.speed' 元素。
var speedBar = document.querySelector('.speed-bar')獲取彩色容器（速度條）的 '.speed-bar' 元素。
var video = document.querySelector('.video')獲取視頻元素的 '.video' 元素。
speed.addEventListener('mousemove', function(e) { ... })監(jiān)聽速度控制條容器上的鼠標移動事件。
var y = e.pageY - speed.getBoundingClientRect().top計算鼠標在速度控制條容器內(nèi)的垂直位置（距離容器頂部的距離）。
var percent = y / speed.offsetHeight計算鼠標在速度控制條容器內(nèi)的垂直位置相對于容器高度的百分比。
var height = Math.round(percent * 100) + '%'根據(jù)鼠標垂直位置的百分比計算彩色容器的高度。
speedBar.style.height = height通過修改彩色容器的高度樣式來實現(xiàn)動態(tài)變化
var min = 0.4 和 var max = 4置視頻的最小和最大播放速度。
var playSpeed = percent * (max - min) + min根據(jù)鼠標在容器內(nèi)的垂直位置百分比來計算視頻的播放速度。
speedBar.textContent = playSpeed.toFixed(2) + 'x'在彩色容器上顯示當前的播放速度。
video.playbackRate = playSpeed將計算出的播放速度應(yīng)用到視頻元素上。

這段代碼實現(xiàn)了根據(jù)鼠標在速度控制條容器內(nèi)的垂直位置動態(tài)調(diào)整彩色容器的高度，并根據(jù)高度計算出相應(yīng)的播放速度應(yīng)用到視頻元素上。

效果展示

鼠標上下移動可控制視頻播放速度，從上往下加快。

補充

因為我們是將HTML、CSS和JS代碼分開寫的，所以必須要在HTML文件中的頭部添加<link rel="stylesheet" href="./style.css">, 以及在body中添加<script src="./index.js"></script>，你的 HTML 文件將會包含外部樣式表和 JavaScript 文件，分別用于設(shè)置頁面樣式和實現(xiàn)交互功能。

以上就是用JS制作可交互的視頻進度條的案例分享的詳細內(nèi)容，更多關(guān)于JS可交互視頻進度條的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: