基于JavaScript構(gòu)建高級視頻播放器

更新時(shí)間：2024年04月20日 14:09:07 作者：睡著學(xué)

這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript構(gòu)建高級視頻播放器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

在當(dāng)今數(shù)字化的時(shí)代，視頻內(nèi)容在我們的日常生活中扮演著至關(guān)重要的角色。無論是在線教育、娛樂還是信息傳播，一個(gè)能夠滿足用戶需求的播放器都能極大地提升用戶體驗(yàn)。

html部分

首先我們頁面是這樣的。

視頻上方有一個(gè)文件輸入框，視頻居中在頁面上。視頻的右邊有一個(gè)滑塊，用來控制視頻的播放速度；滑塊上的數(shù)值為播放速率。

<main class="container">
    <label for="file-upload" class="custom-file-upload">
        <input type="file" id="file-upload" accept="video/*">
        上傳視頻
    </label>
    <div id="video-container">
        <div class="wrapper">
            <!-- 行內(nèi)塊元素 -->
            <video src="" width="765" height="430" controls id="video"></video>
            <div class="speed">
                <div class="speed-bar">1x</div>
            </div>
        </div>
    </div>
</main>

思路

首先我們用wrapper盒子包括視頻和滑塊，再用container盒子包括wrapper盒子和文件輸入框。這樣我們就有大概的html框架思路。

container盒子的標(biāo)簽我們使用main而不使用div，是因?yàn)閙ian更具有語義化，表示這個(gè)頁面的主體內(nèi)容。
label標(biāo)簽用于將表單中的輸入元素（如文本輸入框、單選按鈕、復(fù)選框等）與相關(guān)的文本描述關(guān)聯(lián)起來。label標(biāo)簽通過將 for 屬性值設(shè)置為輸入元素的 id 屬性值，建立與輸入元素的關(guān)聯(lián)。
在input標(biāo)簽中type="file"表示該輸入框?yàn)槲募斎肟颉ccept="video/*"表示該文件輸入框只接收視頻文件。
video標(biāo)簽的controls表示顯示視頻控制器。

css部分

首先在寫css代碼的第一步就是清除所有標(biāo)簽的默認(rèn)內(nèi)邊距和外邊距。

* {
    margin: 0;
    padding: 0;
}

然后我們?yōu)榱俗屛覀兊捻撁娓每?，我們可以添加頁面背景，我們要將背景添加到body標(biāo)簽中才能覆蓋整個(gè)頁面。

body {
    background-image: url(./11.jpg);
    background-size: 100%;
}

我們看wrapper盒子里的css樣式。

.wrapper {
    /* 固定定位，以瀏覽器屏幕（可視窗口）為參考系 */
    position: fixed;
    /* 相對于瀏覽器屏幕向左移動百分之五十 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

為了讓將 .wrapper元素固定在瀏覽器窗口的中央位置。

首先給.wrapper元素相對于瀏覽器窗口進(jìn)行定位
將元素的左側(cè)和頂部定位到窗口的 50% 位置
使用 translate 方法將元素在水平和垂直方向上各移動自身寬度和高度的 50%，以實(shí)現(xiàn)居中效果。

display: flex; 將元素設(shè)置為 Flex 布局，允許在該元素內(nèi)進(jìn)行靈活的子元素排列。

滑塊的css樣式

.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    border-radius: 50px;
    /* 允許內(nèi)容溢出并隱藏 */
    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;
}

.speed-bar元素生成了一個(gè)從頂部的#2376ae 到底部的#c16ecf 的線性漸變。

background: linear-gradient(to bottom, #2376ae, #c16ecf);

使用 flex 布局，使子元素在水平和垂直方向上居中對齊。

display: flex;
justify-content: center;
align-items: center;

設(shè)置鼠標(biāo)指針為指針樣式

cursor: pointer;

JavaScript部分

我們現(xiàn)在還不知道要視頻的URL，我們要獲得視頻的URL并且賦值給id為"video"的video標(biāo)簽的src屬性。

const fileUpload = document.getElementById('file-upload');
const video = document.getElementById('video');

fileUpload.addEventListener('change', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function (e2) {
        video.src = e2.target.result;
    }
    reader.readAsDataURL(file)
})

首先我們是思路是這樣：

首先我們創(chuàng)建一個(gè)fileUpload對象獲取#file-upload元素，創(chuàng)建一個(gè)video對象獲取#video元素
對fileUpload對象添加一個(gè)change事件監(jiān)聽，實(shí)現(xiàn)當(dāng)用戶更改上傳文件時(shí)，觸發(fā)事件處理函數(shù)function（e）實(shí)現(xiàn)讀取文件并且使video標(biāo)簽獲取視頻的URL。
function（e）里的function（e2）函數(shù)是在讀取完文件后使video標(biāo)簽獲取視頻的URL。

接下來我們要通過JavaScript實(shí)現(xiàn)當(dāng)鼠標(biāo)在 .speed元素上移動時(shí)，實(shí)時(shí)根據(jù)鼠標(biāo)的位置來調(diào)整 .speed-bar 元素的高度，并同步更新視頻的播放速度。

var speed = document.querySelector('.speed')
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) + '%'
    speedBar.style.height = height
    var min = 0.4
    var max = 4
    var palySpeed = percent * (max - min) + min
    speedBar.textContent = palySpeed.toFixed(2) + 'x'
    video.playbackRate = palySpeed
})

首先獲取頁面上具有 .speed'類和.speed-bar的元素

為 speed 元素添加鼠標(biāo)移動事件監(jiān)聽器