如何在指定controls属性时仅显示<video>加载spinner并隐藏其他控件

不用依赖原生的controls属性，完全可以通过监听视频的加载事件，配合自定义的Spinner组件来实现，这是更灵活可靠的方案：

方案1：事件监听+自定义Spinner #

核心思路是利用HTML5 video元素的原生事件，在视频处于加载等待状态时显示Spinner，可播放时隐藏。

步骤示例： #

1. HTML结构：把视频和自定义Spinner放在同一个容器里，Spinner默认隐藏

<div class="video-wrapper">
  <video id="my-video" src="your-video-source.mp4"></video>
  <!-- 自定义加载Spinner -->
  <div class="loader" style="display: none;">
    <div class="loader-circle"></div>
  </div>
  <!-- 你的自定义控件按钮 -->
  <button class="custom-play-btn">播放</button>
  <button class="custom-next-btn">下一曲</button>
</div>

2. CSS样式：给Spinner做居中定位和旋转动画

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
}
#my-video {
  width: 100%;
  display: block;
}
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.loader-circle {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

3. JavaScript逻辑：监听视频的加载相关事件

const video = document.getElementById('my-video');
const loader = document.querySelector('.loader');

// 视频开始加载等待时显示Spinner
video.addEventListener('waiting', () => {
  loader.style.display = 'block';
});

// 视频可以播放时隐藏Spinner
video.addEventListener('canplay', () => {
  loader.style.display = 'none';
});

// 可选：视频加载失败时也隐藏Spinner，避免一直显示
video.addEventListener('error', () => {
  loader.style.display = 'none';
  // 这里可以添加加载失败的提示逻辑
});

不推荐的方案：隐藏原生控件的其他元素 #

有人会想通过CSS隐藏原生controls里的播放/进度条等元素，只留加载Spinner，但这种方法兼容性极差——不同浏览器的原生控件DOM结构完全不同，Chrome、Firefox、Safari的控件选择器都不一样，而且浏览器更新后很可能失效，完全不如自定义Spinner可靠。

内容的提问来源于stack exchange，提问作者manaclan