css去掉video的默认loading

要在CSS中去掉HTML `<video>` 元素的默认加载进度条（通常是一个圆形的预加载指示器），你可以通过设置`poster`属性并隐藏它来达到这个效果。`poster`属性指定视频准备好播放前显示的图像。同时，可以利用CSS控制`::play-button`伪元素使其不可见，这通常是默认加载进度条的一部分。

示例代码如下：

video {
  width: 100%; /* 或者自适应宽度 */
  height: auto;
  /* 隐藏默认的播放按钮 */
  -webkit-user-select: none; /* 对于Webkit浏览器 */
  -moz-user-select: none; /* 对于Firefox */
  user-select: none; /* 对于现代浏览器 */
  /* 设置poster属性显示预览图片 */
  poster: url(your-image-url.jpg);
}

/* 确保当视频开始播放时，预加载图片不会消失 */
video:hover::play-button,
video.playing::play-button {
  display: none;
}

/* 可选：自定义加载状态 */
.video-loading::placeholder {
  background-color: transparent;
}

请将`your-image-url.jpg`替换为你希望展示的预览图片URL。这样，视频在未加载完成之前就会显示预览图，而默认的加载指示器会被隐藏。

相关问题

如何用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`媒体事件来判断视频是否已经加载完毕。当视频加载完成后，我们将这个假进度条淡出并隐藏。