video标签自定义播放按钮样式

你可以通过CSS来自定义video标签的播放按钮样式，例如：

/* 隐藏浏览器默认的播放按钮 */
video::-webkit-media-controls-start-playback-button {
  display: none;
}

/* 自定义播放按钮样式 */
video::before {
  content: "\f04b"; /* 使用FontAwesome图标库中的播放图标 */
  font-family: "FontAwesome";
  font-size: 48px;
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* 当视频处于播放状态时隐藏自定义播放按钮 */
video.playing::before {
  display: none;
}

然后在HTML中，你需要给video标签添加一个`playsinline`属性（iOS Safari需要），以及一个`controls`属性（显示浏览器默认的控制条），并且为视频添加一个事件监听器，在视频开始播放时添加一个`playing`类名：

<video src="video.mp4" playsinline controls></video>

var video = document.querySelector('video');
video.addEventListener('play', function() {
  video.classList.add('playing');
});

这样就可以自定义video标签的播放按钮样式了。