分享：audio和video的css一些样式

最新推荐文章于 2025-09-12 09:47:57 发布

原创最新推荐文章于 2025-09-12 09:47:57 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #css3 #html5

vue 专栏收录该内容

39 篇文章

订阅专栏

本文探讨了如何使用CSS来定制HTML5的audio和video元素的外观，包括对audio和video标签的样式调整，以实现更好的媒体播放体验。

audio和video的css一些样式

以下是audio和video的标签内容

/*video默认全屏按钮*/
::-webkit-media-controls-fullscreen-button{ display: none !important; }
/*video默认aduio音量按钮*/
::-webkit-media-controls-mute-button { display: none !important;}
/*video默认setting按钮*/
::-internal-media-controls-overflow-button{ display: none !important;}
/*video默认setting按钮*/
.trump-button[sub-component="fullscreen_btn"],.trump-button[now="fullscreen"]{ display:none!important;}    
.trump-button[sub-component="setting"]{ display:none !important;}
 /*腾讯云点播禁用firefox全屏、设置按钮*/
::-webkit-media-controls {  display:none !important;}
/*时间——左*/
::-webkit-media-controls-current-time-display{background-color: rgb(49, 156, 97);}
/*时间——右*/
::-webkit-media-controls-time-remaining-display{background-color: rgb(0, 255, 221);}
/*音量条*/
::-webkit-media-controls-volume-slider{background-color: rgb(255, 0, 119);} 
/*删掉下载/全屏等按钮*/
<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>
``