修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片

比眉伴天荒 2024-04-24 21:00 5阅读 0赞

##### 需求： #####

> ###### 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播放器样式进行美化） ######

![image][]

###### 就以`2.播放器的进度条长度拉长些,与播放器长度一样长`为例进行样式的修改 ######

##### 操作步骤： #####

###### 1.首先需要利用浏览器内部设置进行对video标签的内部构造进行查看，正常状态下浏览器F12抓取到video播放器如下图，我们无法看到video内部构造，所以无法对video播放器样式进行修改 ######

![image][image 1]

###### 2.谷歌浏览器下，找到F12开发者工具->设置按钮->Preferences->Show user agent 勾选shadow DOM ######

![image][image 2]  
![image][image 3]

###### 3.然后右键选中video播放器->检察,将会看到一下内容，可以看到video的内部结构，这样就可以根据类名进行样式的修改 ######

![image][image 4]

###### 4.修改video播放器的进度条长度问题代码： ######

video::-webkit-media-controls-timeline {
      padding-left: 0px!important;
      padding-right: 0px!important;
    }

###### 修改完之后样式如下（本子自己感觉还是有一点距离好看，很无奈！） ######

![image][image 5]

[image]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/11a402b477874524baa63ba9cf8cba10.png
[image 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/8ae327211bed4572a468e0ebd04db394.png
[image 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/0526645b4b094d708995c54095e4da37.png
[image 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/cd4d76b0a2784ce7a42aaf71cd1cb4dd.png
[image 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/068c3f2b5df74d54b03eef6e5d42fabb.png
[image 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/e5c75a4ef0c54591b7adfea5e28ecbe0.png