css 视频怎么不显示进度条等按钮
时间: 2023-08-08 08:05:09 浏览: 74
要在 CSS 中隐藏视频的进度条和其他控制按钮,你可以使用 `controls` 属性来控制视频的默认控制条的显示与隐藏。下面是一个示例代码,演示了如何在 CSS 中隐藏视频的进度条和按钮:
```html
<style>
.video-container {
position: relative;
width: 400px;
}
.video-container video {
width: 100%;
}
.video-container video::-webkit-media-controls {
display: none;
}
.video-container video::-webkit-media-controls-enclosure {
overflow: hidden !important;
width: 0;
height: 0;
}
</style>
<div class="video-container">
<video src="video.mp4" controls></video>
</div>
```
在上述代码中,我们首先创建一个 `.video-container` 类来作为视频容器的样式。通过设置容器的宽度和相对定位,我们可以控制视频的显示位置和大小。
然后,在 `.video-container video` 类中,我们设置视频元素的宽度为100%,以确保它填充整个容器。
接下来,我们使用伪元素选择器 `::-webkit-media-controls` 和 `::-webkit-media-controls-enclosure` 来隐藏视频的默认控制条和外层包裹容器。通过将 `display` 设置为 `none`,我们隐藏了默认控制条。通过将 `overflow` 设置为 `hidden`,以及将宽度和高度设置为0,我们隐藏了外层包裹容器。
最后,我们在 HTML 中使用 `<video>` 元素来添加视频,并通过设置 `controls` 属性来启用视频的默认控制条。在示例中,我们将视频文件设置为 `src="video.mp4"`。
这样,你就可以通过在 CSS 中隐藏视频的进度条和按钮来自定义视频播放器的样式。请注意,不同浏览器可能使用不同的前缀来隐藏默认控制条,你可能需要根据需要进行调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)