video标签播放器自定义样式

要自定义video标签的播放器样式，你可以使用CSS进行调整。下面是一些常见的自定义样式示例：

1. 修改播放器的尺寸和位置：

video {
  width: 100%;
  height: auto;
  position: relative;
}

2. 隐藏默认的控制条：

video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}

3. 添加自定义控制条：

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
}

.video-controls button {
  color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.video-controls button:hover {
  color: #ff0000; /* hover状态下的颜色 */
}

在HTML中，你需要将video标签和自定义的控制条包装在一个容器中：

<div class="video-container">
  <video controls>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  
  <div class="video-controls">
    <button>Play/Pause</button>
    <button>Fullscreen</button>
    <!-- 其他自定义控制按钮 -->
  </div>
</div>

以上示例只是一种基本的自定义样式，你可以根据需要进一步修改和扩展。