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

最新推荐文章于 2024-03-19 11:58:01 发布

万花丨凋

最新推荐文章于 2024-03-19 11:58:01 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js css css3 html5

本文链接：https://blog.youkuaiyun.com/awseda/article/details/105927256

版权

vue 专栏收录该内容

39 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
``