需求：
1.播放器可以支持上傳默認封面圖片
2.播放器的進度條長度拉長些,與播放器長度一樣長，或者其他方式美化一下
首先需求 1.播放器可以支持上傳默認封面圖片解決方案：
1.第一種方法可以直接在video標簽中直接添加poster屬性
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png">
your browser does not support the video tag
</video>
</body>
</html>
2.前端利用js給video標簽追加poster屬性以及屬性對應的圖片路徑：
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" controls="controls" id="myVideo">
your browser does not support the video tag
</video>
</body>
</html>
<script type="text/javascript">
const thisVideo = document.getElementById('myVideo');
const thisVideoImgSrc = "img/poster.png"
thisVideo.setAttribute('poster',thisVideoImgSrc)
</script>
下圖為正常video標簽的顯示圖片（客戶說不好看要求對video播放器樣式進行美化）
就以2.播放器的進度條長度拉長些,與播放器長度一樣長為例進行樣式的修改
操作步驟：
1.首先需要利用瀏覽器內部設置進行對video標簽的內部構造進行查看，正常狀態下瀏覽器F12抓取到video播放器如下圖，我們無法看到video內部構造，所以無法對video播放器樣式進行修改
2.谷歌瀏覽器下，找到F12開發者工具->設置按鈕->Preferences->Show user agent 勾選shadow DOM
3.然后右鍵選中video播放器->檢察,將會看到一下內容，可以看到video的內部結構，這樣就可以根據類名進行樣式的修改
4.修改video播放器的進度條長度問題代碼：
video::-webkit-media-controls-timeline {
padding-left: 0px!important;
padding-right: 0px!important;
}
修改完之后樣式如下（本子自己感覺還是有一點距離好看，很無奈！）
