vue 视频隐藏controls功能按钮

 

/*video默认全屏按钮*/

video::-webkit-media-controls-fullscreen-button{ display: none !important; }

/*video默认aduio音量按钮*/
video::-webkit-media-controls-mute-button { display: none !important;}

/*video默认setting按钮*/
video::-internal-media-controls-overflow-button{ display: none !important;}

/*隐藏controls中的音量控制*/
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-mute-button { //隐藏android端video标签自带的音量调节按钮
display: none;
}

/*其实这倒不是什么大问题，但是为了样式统一，以及方便监控事件，可以在css中取消这个按钮*/
video::-webkit-media-controls-start-playback-button { //video视频不显示默认的中心的play icon
opacity: 0;
}

/*禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）*/
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button
————————————————
版权声明：本文为CSDN博主「刘杨造梦程序开发建站」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/122612134

 

 

//所有控件
video::-webkit-media-controls-enclosure {
display: none;//隐藏控件
//修改样式如下
background-color: brown;
width: 0;
height: 0;
}