CSS 控制 video 标签的控制栏组件的显隐

作者：System 时间：2024年08月11日分类：所有,css 字数：678

在CSS中，可以通过控制HTML的<video>标签内部的controls属性来控制视频播放控件的显示与隐藏。如果你想要使用CSS来控制这些控件的显示，可以使用HTML属性选择器。

以下是一个简单的例子，演示如何使用CSS来控制视频控制栏的显示：

HTML:




<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

CSS:




/* 默认显示控制栏 */
#myVideo::-webkit-media-controls {
  display: flex;
}
 
/* 隐藏控制栏 */
#myVideo::-webkit-media-controls {
  display: none;
}

在上面的CSS代码中，#myVideo是视频元素的ID。::-webkit-media-controls是一个伪元素，它允许你自定义WebKit内核浏览器中的媒体控制界面。通过改变display属性，你可以控制这些控件的显示与隐藏。

请注意，这种方法主要适用于基于WebKit的浏览器，如旧版的Safari和Chrome。对于其他浏览器，比如Firefox，你可能需要使用不同的方法或者JavaScript来控制视频控件的显示。