HTML5本地視訊播放器設計（+彈幕功能）

重點是設計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本身鏤空，背景色不需要處理；滑動條有一些問題，全域性定位沒必要用那麼多絕對定位。