前言

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

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

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

1、js實現音樂播放遺留的問題
2、如何改變range以及progress的樣式
3、如何做到視訊緩衝的

基於此同時本次的實現主要想要學習的知識點如下：

1、通過range以及progress來實現進度，改變瀏覽器range與progress的預設樣式
2、視訊緩衝

功能

本次實現是video，具體的實現功能如下：

1、基本的播放暫停功能
2、滑動以及點選選擇進度
3、音樂調節
4、全屏功能
5、重播
6、視訊緩衝

整體實現效果如下：

其基本的實現思路是：

視訊播放進度使用range(bar)+progress(fg)+ progress(buffer)來實現進度以及緩衝效果
音量的調節range + progress來實現
緩衝數值通過video物件buffered屬性來獲取

實際上整體的實現思想跟js實現音樂播放的思路相同

程式碼以及詳細註釋上傳到我的Github

本次實現video對於網路問題沒有很好的處理，如果視訊載入緩衝受阻，沒有很好的表現方式。

之後會實現簡易播放器的功能，歌單、隨機播放、迴圈播放、單曲迴圈等，類似於網易雲音樂播放歌曲的效果。