透過 JS 一鍵滑動調節掌控影片播放速度,附完整程式碼！-網頁技術-CodeUp Hub

前言

傳統的影片播放器往往只提供幾種固定的倍速選項

今天我們來實現一個透過滑動調節影片的播放倍速，這種方式極其優雅

優雅的背後更是對自身邏輯思維能力的一種考驗，接下來就讓我們一起探索一下吧

實現

實現效果

透過 JS 一鍵滑動調節掌控影片播放速度,附完整程式碼！

實現流程

頁面程式碼分析

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

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

<div>: 這是一個包裹整個影片播放區域的容器,用於佈局和樣式設定。
<video src="./mv.mp4" controls width="765" height="430"></video>: 這是一個標準的 HTML <video> 標籤,用於插入一個影片檔案。

src="./mv.mp4": 指定影片檔案的路徑和檔名。
controls: 為影片新增預設的播放控制元件,如播放/暫停、進度條、音量控制等。
width="765" height="430": 設定影片播放器的寬度和高度。
class="video": 為影片元素新增一個類名,用於後續的透過類名獲取該元素。

<div>: 這是一個包含影片播放速度控制器的容器。
<div>1x</div>: 這是實際的速度控制條,初始顯示為"1x"倍速

css程式碼比較簡單就不做分析了，直接附上

* {
    margin: 0;
    padding: 0;
}

body {
    /* background: url(./背景圖.jpg); */
    background-color: #e0effe;
}

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

.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    /*display: inline-block;*/
    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;
}
}

js程式碼分析(重點)

重點分析js部分的邏輯思維

怎麼去實現，實現的思路？

首先，既然是根據滑塊去獲取倍速，那麼滑鼠的位置肯定是和影片播放的倍數是有關係的，透過邏輯關係與倍速實現滑動改變倍速

第一步，先獲取三個元素，方便對其進行操作

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

既然是滑塊，就必須獲取滑鼠的位置，可以透過addEventListener去監聽mousemove事件，當監聽到事件後，便會觸發回撥函式

speed.addEventListener('mousemove', function (e) {
    var y = e.pageY - speed.getBoundingClientRect().top
    var percent = y / speed.offsetHeight
    var height = Math.round(percent * 100) + '%'

    // 用js修改speed-bar容器的height
    speedBar.style.height = height
    // 修改倍速文字
    var min = 0.5
    var max = 4
    var playSpeed = percent * (max - min) + min
    speedBar.textContent = playSpeed.toFixed(2) + 'x'

    // 更改影片播放速度
    video.playbackRate = playSpeed

})

重點分析回撥函式

在回撥函式當中，會傳入物件e 事件物件，事件物件包含了與事件相關的各種資訊

var y = e.pageY - speed.getBoundingClientRect().top: 計算滑鼠指標相對於 "speed" 元素頂部的垂直距離。
var percent = y / speed.offsetHeight: 計算滑鼠指標在 "speed" 元素高度上的百分比位置。
var height = Math.round(percent * 100) + '%': 根據百分比位置計算出一個新的高度值,並轉換成字串百分比格式。
speedBar.style.height = height: 將計算出的新高度值設定到 class 名為 "speed-bar" 的元素的 CSS 高度屬性上,從而實現了速度條的滑動效果。
var min = 0.5, var max = 4: 定義了影片播放速度的最小值和最大值。
var playSpeed = percent * (max - min) + min: 根據滑鼠位置的百分比,計算出一個介於最小值和最大值之間的播放速度值。
speedBar.textContent = playSpeed.toFixed(2) + 'x': 將計算出的播放速度值更新到 "speed-bar" 元素的文字內容上,顯示當前的倍速。
video.playbackRate = playSpeed: 將計算出的播放速度值設定到 "video" 元素的 playbackRate 屬性上,從而實現了影片播放速度的動態調整。

總結

本文展示瞭如何使用 HTML、CSS 和 JavaScript 結合起來,建立一個具有影片播放速度調節功能的影片播放器介面。這種互動設計有助於提高使用者體驗,讓觀看影片更加便捷靈活。

完整程式碼

歡迎大家給出建議和最佳化

播放的影片可隨意，只需更改video的src地址即可

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <video src="./mv.mp4" controls width="765" height="430"></video>
        <div>
            <div>1x</div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    /* background: url(./背景圖.jpg); */
    background-color: #e0effe;
}

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

.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    /*display: inline-block;*/
    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;
}

.input1 {
    width: 400px;
    height: 60px;
    border: 10;
    background-color: transparent;
    position: fixed;
    top: 8%;
    left: 40%;
}

.input2 {
    height: 45px;
    font-size: 20;
    border: 10;
    background-color: transparent;
    position: fixed;
    top: 8%;
    left: 66.5%;
}

// 獲取白底容器
// 在白色容器上監聽滑鼠的移動事件
// 獲取到滑鼠移動的距離
// 根據滑鼠移動的距離來設計彩色容器的高度
var speed = document.querySelector('.speed')
var video = document.querySelector('.video')
var speedBar = document.querySelector('.speed-bar')

speed.addEventListener('mousemove', function (e) {
    var y = e.pageY - speed.getBoundingClientRect().top
    var percent = y / speed.offsetHeight
    var height = Math.round(percent * 100) + '%'

    // 用js修改speed-bar容器的height
    speedBar.style.height = height
    // 修改倍速文字
    var min = 0.5
    var max = 4
    var playSpeed = percent * (max - min) + min
    speedBar.textContent = playSpeed.toFixed(2) + 'x'

    // 更改影片播放速度
    video.playbackRate = playSpeed

})

透過 JS 一鍵滑動調節掌控影片播放速度,附完整程式碼！

前言

實現

實現效果

實現流程

頁面程式碼分析

js程式碼分析(重點)

總結

完整程式碼

相關推薦

Vue 2 和 Vue ...

Vue 不用import...

透過修改 scss 方式...

前端除了 console...

vue3+vite前端打...

CSS 列印屬性與 PD...

0則評論