设置video标签的默认样式

妹妹你大胆地往前走啊！

已于 2022-06-02 16:13:55 修改

阅读量1.3w

点赞数 5

分类专栏： html5 css 文章标签： chrome html 前端

于 2019-07-16 10:49:38 首次发布

本文链接：https://blog.csdn.net/danruwang/article/details/96111753

版权

本文主要探讨如何在Chrome浏览器中定制video标签的默认样式。通过分析媒体事件(Media Events)和DOM结构，可以实现对视频控制栏样式的自定义，提供更好的前端用户体验。

摘要由CSDN通过智能技术生成

多媒体事件(Media Events)

通过视频（videos），图像（images）或者音频（audio）触发该事件，多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):
在这里插入图片描述

进入正题
使用chrome调试，如下图，在setting里勾选框中选项
在这里插入图片描述
可以看到video标签的控制栏dom结构，如下图，修改对应的样式即可

在这里插入图片描述

	//全屏按钮
 	video::-webkit-media-controls-fullscreen-button {
        // display: none;
    }
    //播放按钮
    video::-webkit-media-controls-play-button {

    }
    //进度条
    video::-webkit-media-controls-timeline {
        // display: none;
    }