如何移除移动端HTML5视频的默认播放按钮覆盖层

直接给你几个不用切换缩略图的实用方案：

方案1：用CSS精准隐藏默认播放按钮 #

针对不同移动端浏览器的自带控件，通过CSS伪元素直接隐藏：

/* 隐藏WebKit内核浏览器（如Safari、Chrome移动端）的默认播放按钮 */
.life-bg::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
}

/* 隐藏WebKit内核的整体控件栏 */
.life-bg::-webkit-media-controls {
  display: none !important;
}

/* 先禁止视频本身的点击事件，避免触发默认控件，自定义按钮单独设置可点击 */
.life-bg {
  pointer-events: none;
}

注意：给你的自定义播放按钮添加pointer-events: auto;，确保它能正常响应点击。

方案2：设置视频poster为第一帧 #

提前导出视频的第一帧作为图片，给video标签加上poster属性：

<video
  id="life"
  class="life-bg"
  src="/videos/life.mp4"
  loop
  muted
  playsinline
  poster="/videos/life-first-frame.jpg"
></video>

这样视频未播放时会显示这张第一帧图片，既保留了你要的背景效果，又能覆盖浏览器的默认播放按钮占位。

方案3：属性调整配合CSS双重保障 #

保持现有视频属性（绝对不要加controls属性），补充preload="metadata"属性，让浏览器提前加载视频元数据（包括第一帧）：

<video
  id="life"
  class="life-bg"
  src="/videos/life.mp4"
  loop
  muted
  playsinline
  preload="metadata"
  poster="/videos/life-first-frame.jpg"
></video>

搭配方案1的CSS，基本能覆盖所有主流移动端浏览器的情况。

关键提醒 #

• 绝对不要添加controls属性，这会触发浏览器完整控件栏，反而多出不必要的按钮。
• 自定义播放按钮的点击逻辑里，若之前给视频设了pointer-events: none，记得在播放后恢复pointer-events: auto，或者直接让按钮绑定视频的播放/暂停方法，不用依赖视频本身的点击。

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