html video标签隐藏默认图标

要隐藏HTML视频标签的默认图标，可以使用CSS样式将其覆盖或者设置为透明。以下是两种方法：

1. 使用CSS样式覆盖默认图标：

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

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

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

2. 设置默认图标为透明：

video::-webkit-media-controls-start-playback-button {
  background-color: transparent !important;
}

video::-webkit-media-controls-play-button {
  background-color: transparent !important;
}

video::-webkit-media-controls-volume-slider-container {
  background-color: transparent !important;
}

这些样式将会影响所有使用webkit内核的浏览器。如果需要适配其他浏览器，也可以使用相应的前缀。

相关问题

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标签的播放按钮样式了。