重點是設計html5播放器交互界面，滑動條，頁面布局，簡易彈幕
1.整體外觀：

2.完整代碼很長，所以不放了，之后上傳。
3.
（1）首先是布局，通過居中的div控制整個區域居中，上邊是video 下邊是control塊，再下方是彈幕輸入框。理解position屬性，將進度條、時間、音量區域、全屏區域通過css設定屬性放在control塊中。
（2）播放按鈕是純css制作，

.play{width: 25px;height: 25px;position: relative;top: 7.5px;left: 20px;display: inline-block; } .play:before{border: 12.5px solid transparent;border-left: 12.5px solid #000;content: "";position: absolute;left:6.25px; }

利用css的一個技巧，設定border得到播放圖標。
暫停圖標也是css制作，但是不是利用border，是利用：before，：after 設定高寬背景色得到。
（3）進度條是參考了網易云音樂的音樂進度條設計的，由此學到了巧妙使用position-image屬性，可以快速實現很多很棒的效果。注意背景圖像的定位是關鍵，也可以在偽類中改變背景圖片位置，從而改變圖標。（背景圖片上面有很多圖標，通過限制區域大小以及背景圖片位置來達到修改顯示的圖標效果）。
進度條其實是三個顏色，我使用了兩個，沒有考慮預加載。通過進度修改紅色進度條長度。
另外，可以點擊改變進度，但不可以拖動。拖動功能在音量條進行了實現，實現方法見另一個文章。
（4）時間的實現：
duration屬性得到視頻總長，通過自己寫的secondToMinute（）轉換成00：00形式輸出。再得到當前時間顯示。
（5）音量：
通過display屬性設定音量條的顯示與消失。
（6）全屏函數：
點擊全屏，注意不同的瀏覽器全屏函數基本都不同，參考網上的總結進行了兼容性寫法。
（7）彈幕實現，通過在video上方鋪一個運動的canvas實現彈幕效果。下方input中輸入后，回車或者按下button即可發送，回車方式比較簡單，監控e.keyCode ，實際開發過程遇到回車就會頁面刷新，這是因為表單默認都是要返回本頁面，需要在form中設定 ousubmit=”return false;” 這樣就可以解決。
關于canvas線性運動，是通過給新建立的canvas一個寫好的className,在其中已經寫好動畫效果。
實際還遇到了canvas內部文字混亂問題，文字大小設定失效，完全與canvas大小相關，最后也不知道怎么解決。最后canvas可以顯示的文字為8個左右，超出就隱藏。不過基本的彈幕功能完美實現了。
寫了好幾天的代碼，完成了很開心。

后記：
寫完文章之后，突然想到一個點子，canvas性能不好，為什么不能用div呢，只要把背景色設定為transparent,應該可以。然后測試了一下，效果超級好！！一直在想大的視頻網站彈幕用什么做呢 ，現在覺得就是div啊 ，思路被影響了，其實就是一個透明屬性就可以解決的問題。

總結：2017/10/9
這是我以前寫的一個H5播放器，很多錯誤，比如彈幕可以使用div而不是canvas,div本身鏤空，背景色不需要處理；滑動條有一些問題，全局定位沒必要用那么多絕對定位。

總結

以上是生活随笔為你收集整理的HTML5本地视频播放器设计（+弹幕功能）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。