如何在iOS中隐藏HTML视频播放器控件？

核心问题分析 #

你当前的代码存在两个关键问题：

• HTML的controls是布尔属性，只要该属性存在，无论值设为false还是其他，浏览器都会渲染控件，这是iOS Safari仍显示控件的主要原因之一。
• iOS Safari对WebKit媒体控件的伪元素选择器支持和桌面端/安卓端存在差异，部分你写的伪类在iOS上不生效。

分步解决建议 #

1. 移除controls属性 #

直接从<video>标签里删掉controls="false"这一行，因为布尔属性的特性是：只要标签中出现该属性，就会启用对应功能，和属性值无关。修改后的标签结构：

<video
  autoplay
  preload muted
  style="max-width: 100% !important; height: auto; box-shadow: none !important;"
  disablepictureinpicture
  controlsList="nofullscreen nodownload noremoteplayback noplaybackrate"
  class="fit-picture custom-video-player"
  playsInline
  transition="scale-transition"
  @ended="onPlayerEnded($event)"
>
  <source :src="`${videoUrl}`" type="video/mp4">
</video>

2. 针对iOS Safari优化CSS #

替换原有的WebKit伪元素样式，使用iOS Safari支持的选择器来彻底隐藏控件：

/* 隐藏整个控件容器 */
video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* 隐藏所有控件元素 */
video::-webkit-media-controls {
  display: none !important;
}

/* 可选：防止点击视频唤起控件（无交互需求时使用） */
video {
  pointer-events: none;
}

注意：如果视频需要支持用户交互（比如手动播放/暂停），不要添加pointer-events: none，保留交互逻辑同时通过伪元素隐藏控件即可。

3. 自定义覆盖层方案（终极兜底） #

如果上述CSS方案仍不生效，可以用一个透明的div覆盖在视频上方，阻止iOS Safari触发控件：

<div style="position: relative; max-width: 100%;">
  <video
    autoplay
    preload muted
    style="max-width: 100% !important; height: auto; box-shadow: none !important;"
    disablepictureinpicture
    controlsList="nofullscreen nodownload noremoteplayback noplaybackrate"
    class="fit-picture custom-video-player"
    playsInline
    transition="scale-transition"
    @ended="onPlayerEnded($event)"
  >
    <source :src="`${videoUrl}`" type="video/mp4">
  </video>
  <!-- 透明覆盖层阻止点击唤起控件 -->
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: transparent;"></div>
</div>

4. Video.js配置修正（如果继续使用） #

如果你用Video.js，确保初始化时明确设置禁用控件，并关闭iOS原生触摸控件：

var player = videojs('my-video', {
  controls: false,
  nativeControlsForTouch: false, // 关键：禁用iOS原生触摸控件
  autoplay: true,
  muted: true,
  playsinline: true
});

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