video标签自定义样式

可以使用CSS来自定义video标签的样式。以下是一些可以修改的常见属性：

- width和height：设置视频的宽度和高度。
- background-color：设置视频区域的背景颜色。
- object-fit：控制视频在容器中的适应方式。
- control：控制视频是否显示控制面板。
- poster：设置视频封面图像。

例如，以下CSS代码将设置视频的宽度为600像素，高度为400像素，并将播放器的背景颜色设置为灰色：

video {
  width: 600px;
  height: 400px;
  background-color: #ccc;
}

如果要控制视频的适应方式，可以使用object-fit属性。例如，以下CSS代码将视频在容器中居中并保持纵横比不变：

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

还可以使用伪元素来自定义视频控制面板的样式。例如，以下CSS代码将控制面板的背景颜色设置为半透明黑色：

video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.5);
}

最后，如果需要设置视频封面图像，可以使用poster属性。例如，以下HTML代码将视频封面图像设置为“cover.jpg”：

<video poster="cover.jpg">
  <source src="video.mp4" type="video/mp4">
</video>