video标签自定义样式

可以使用CSS来自定义video标签的样式，例如：

video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid #ccc;
  background-color: #000;
}

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

video::-webkit-media-controls-enclosure {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% - 40px);
  height: 40px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .7);
}

video::-webkit-media-controls-play-button {
  width: 30px;
  height: 30px;
  background-image: url('play-button.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

video::-webkit-media-controls-time-remaining-display {
  display: none;
}

上面的样式代码可以实现以下效果：

- 视频宽度为100%，高度自适应
- 显示为块级元素，居中显示，带有1px的灰色边框，背景色为黑色
- 隐藏浏览器默认的控制条
- 自定义控制条的样式，包括控制条容器、播放按钮和剩余时间显示
- 播放按钮显示为一个播放图标，鼠标悬浮时显示手型光标

需要注意的是，不同浏览器支持的CSS属性可能有所不同，有些属性可能需要添加浏览器前缀才能生效。