如何用css去掉video组件自带的loading

要在CSS中去掉HTML `<video>` 元素自带的加载进度条（通常表现为一个小圆圈或进度条），你可以通过设置`::-webkit-media-loading`伪元素的样式为`hidden`或者直接隐藏整个视频区域直到视频完成加载。以下是两种方法：

1. 使用WebKit私有前缀：

video::-webkit-media-loading {
  display: none; /* 或者 visibility: hidden; 这样不影响宽度 */
}

2. 对所有浏览器生效的非私有方法，利用CSS `progress` 来替代：

/* 创建一个假的进度条 */
.video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 4px; /* 调整高度与原加载进度条一致 */
  background-color: #ccc;
}

/* 当视频加载完成时显示真实视频，隐藏loader */
video[loadeddata] + .video-loader {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  display: none;
}

这里我们创建了一个隐藏的进度条容器，并使用`loadeddata`媒体事件来判断视频是否已经加载完毕。当视频加载完成后，我们将这个假进度条淡出并隐藏。