1、怎么查看video内部构造
chrome 下，开发者工具 setting Preferences Elements 勾选 “Show user agent shadow DOM”
2、隐藏video功能按钮
/*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;
}
其他关于controls相关的控制
参考文章
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
网友评论