当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。
<video controls></video>
//全屏按钮video::-webkit-media-controls-fullscreen-button {display: none;}//播放按钮video::-webkit-media-controls-play-button {display: none;}//进度条video::-webkit-media-controls-timeline {display: none;}//观看的当前时间video::-webkit-media-controls-current-time-display{display: none; }//剩余时间video::-webkit-media-controls-time-remaining-display {display: none; }//音量按钮video::-webkit-media-controls-mute-button {display: none; }video::-webkit-media-controls-toggle-closed-captions-button {display: none; }//音量的控制条video::-webkit-media-controls-volume-slider {display: none; }//所有控件video::-webkit-media-controls-enclosure{display: none;}
如果觉得《CSS_控制 video 标签的控制栏组件(隐藏 显示进度条 播放按钮 全屏按钮等)》对你有帮助,请点赞、收藏,并留下你的观点哦!