vue 视频隐藏controls功能按钮

发布时间 2023-06-21 13:49:27作者: 谁主沉浮1226

 

/*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