cssvideo标签

CSS中的video标签可以用来控制和美化HTML视频播放器的外观。通过添加不同的CSS属性和选择器，可以隐藏或修改视频播放器的控制组件，以实现自定义的样式。例如，可以使用以下CSS代码隐藏视频播放器的全屏按钮、播放按钮、进度条等组件：

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;
}

这些代码可以通过设置display属性来隐藏视频播放器的不需要显示的组件。通过添加这些样式，可以自定义视频播放器的外观和功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS学习30：多媒体标签（视频&音频）](https://blog.csdn.net/qq_47373340/article/details/124086620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [CSS_控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）](https://blog.csdn.net/weixin_44599931/article/details/109181059)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [video标签不能自动播放的原因](https://blog.csdn.net/qq_45690359/article/details/128265523)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]