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

更新時間：2024年04月20日 14:09:07 作者：睡著學

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

前言

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

html部分

首先我們頁面是這樣的。

視頻上方有一個文件輸入框，視頻居中在頁面上。視頻的右邊有一個滑塊，用來控制視頻的播放速度；滑塊上的數(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盒子的標簽我們使用main而不使用div，是因為mian更具有語義化，表示這個頁面的主體內(nèi)容。
label標簽用于將表單中的輸入元素（如文本輸入框、單選按鈕、復選框等）與相關(guān)的文本描述關(guān)聯(lián)起來。label標簽通過將 for 屬性值設置為輸入元素的 id 屬性值，建立與輸入元素的關(guān)聯(lián)。
在input標簽中type="file"表示該輸入框為文件輸入框。accept="video/*"表示該文件輸入框只接收視頻文件。
video標簽的controls表示顯示視頻控制器。

css部分

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

* {
    margin: 0;
    padding: 0;
}

然后我們?yōu)榱俗屛覀兊捻撁娓每矗覀兛梢蕴砑禹撁姹尘?，我們要將背景添加到body標簽中才能覆蓋整個頁面。

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元素相對于瀏覽器窗口進行定位
將元素的左側(cè)和頂部定位到窗口的 50% 位置
使用 translate 方法將元素在水平和垂直方向上各移動自身寬度和高度的 50%，以實現(xiàn)居中效果。

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

滑塊的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元素生成了一個從頂部的#2376ae 到底部的#c16ecf 的線性漸變。

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

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

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

設置鼠標指針為指針樣式

cursor: pointer;

JavaScript部分

我們現(xiàn)在還不知道要視頻的URL，我們要獲得視頻的URL并且賦值給id為"video"的video標簽的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)建一個fileUpload對象獲取#file-upload元素，創(chuàng)建一個video對象獲取#video元素
對fileUpload對象添加一個change事件監(jiān)聽，實現(xiàn)當用戶更改上傳文件時，觸發(fā)事件處理函數(shù)function（e）實現(xiàn)讀取文件并且使video標簽獲取視頻的URL。
function（e）里的function（e2）函數(shù)是在讀取完文件后使video標簽獲取視頻的URL。

接下來我們要通過JavaScript實現(xiàn)當鼠標在 .speed元素上移動時，實時根據(jù)鼠標的位置來調(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 元素添加鼠標移動事件監(jiān)聽器