h5中 video标签的controls属性自带的播放暂停按钮如何自定义

如果想要自定义video标签自带的播放和暂停按钮，可以使用CSS样式来实现。需要先将controls属性设置为false，这样就可以隐藏自带的按钮。然后在CSS中使用:before和:after伪元素来创建自定义的按钮图标，并使用JavaScript来实现按钮的功能。

以下是一个示例代码：

HTML代码：

<video id="myVideo" controls="false">
  <source src="myVideo.mp4" type="video/mp4">
</video>

CSS代码：

#myVideo::-webkit-media-controls-play-button:before {
  content: "\f04b"; /* FontAwesome play icon */
  font-family: FontAwesome;
  font-size: 24px;
  color: #fff;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#myVideo::-webkit-media-controls-pause-button:before {
  content: "\f04c"; /* FontAwesome pause icon */
  font-family: FontAwesome;
  font-size: 24px;
  color: #fff;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript代码：

var video = document.getElementById("myVideo");
var playButton = document.querySelector("#myVideo::-webkit-media-controls-play-button");
var pauseButton = document.querySelector("#myVideo::-webkit-media-controls-pause-button");

playButton.addEventListener("click", function() {
  video.play();
});

pauseButton.addEventListener("click", function() {
  video.pause();
});

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