video.js 美化

要美化 video.js 播放器，可以通过修改 CSS 样式来实现。以下是一些可以参考的 CSS 样式：

1. 修改播放器颜色：

.video-js {
  background-color: #333;
}

.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-volume-panel {
  background-color: #444;
}

.vjs-default-skin .vjs-slider-bar,
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level {
  background-color: #f00;
}

.vjs-default-skin .vjs-big-play-button {
  background-color: #f00;
}

2. 修改字体和图标：

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button {
  font-family: Arial, sans-serif;
}

.vjs-icon-play:before {
  content: "\f04b";
}

.vjs-icon-pause:before {
  content: "\f04c";
}

.vjs-icon-volume-high:before {
  content: "\f028";
}

.vjs-icon-volume-low:before {
  content: "\f027";
}

3. 修改进度条样式：

.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-load-progress {
  height: 5px;
}

.vjs-default-skin .vjs-slider-handle:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

以上是一些简单的 CSS 样式，可以根据自己的需要进行修改和调整。另外，也可以使用一些已经封装好的 video.js 播放器的主题，例如 videojs-skin-flat 和 videojs-skin-minimal。