前言

之前使用js實現(xiàn)過音樂播放控制條，最終存在幾點不如人意的地方，具體的幾點如下：

1、存在拖動按鈕不流暢
2、時間處理的問題，時間點在播放過程中存在重復(fù)的問題

本篇文章，采用input range以及progress來實現(xiàn)進(jìn)度，避免在js實現(xiàn)音樂播放中使用offsetX來確定具體的點擊的位置，使用另一種方式來解決js實現(xiàn)音樂播放中產(chǎn)生的問題。
本次實踐初衷有兩個：

1、js實現(xiàn)音樂播放遺留的問題
2、如何改變range以及progress的樣式
3、如何做到視頻緩沖的

基于此同時本次的實現(xiàn)主要想要學(xué)習(xí)的知識點如下：

1、通過range以及progress來實現(xiàn)進(jìn)度，改變?yōu)g覽器range與progress的默認(rèn)樣式
2、視頻緩沖

功能

本次實現(xiàn)是video，具體的實現(xiàn)功能如下：

1、基本的播放暫停功能
2、滑動以及點擊選擇進(jìn)度
3、音樂調(diào)節(jié)
4、全屏功能
5、重播
6、視頻緩沖

整體實現(xiàn)效果如下：

其基本的實現(xiàn)思路是：

視頻播放進(jìn)度使用range(bar)+progress(fg)+ progress(buffer)來實現(xiàn)進(jìn)度以及緩沖效果
音量的調(diào)節(jié)range + progress來實現(xiàn)
緩沖數(shù)值通過video對象buffered屬性來獲取

實際上整體的實現(xiàn)思想跟js實現(xiàn)音樂播放的思路相同

代碼以及詳細(xì)注釋上傳到我的Github

本次實現(xiàn)video對于網(wǎng)絡(luò)問題沒有很好的處理，如果視頻加載緩沖受阻，沒有很好的表現(xiàn)方式。

之后會實現(xiàn)簡易播放器的功能，歌單、隨機(jī)播放、循環(huán)播放、單曲循環(huán)等，類似于網(wǎng)易云音樂播放歌曲的效果。

總結(jié)

以上是生活随笔為你收集整理的js实现视频播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。