如何在iOS端隐藏HTML Video特定控件？Android已实现

iOS Safari对原生视频控件的样式控制存在限制，常规的WebKit伪元素CSS在iOS上无法生效——因为其控件是系统级组件而非WebKit渲染。以下是两种可行方案：

方案一：自定义视频控件（最稳定可靠） #

放弃使用原生controls={true}，手动实现所需控件（仅保留音量控制），完全掌控UI表现：

1. 修改MediaPlayer组件，关闭原生控件：

<MediaPlayer
  playsInline={isMobile ? true : false}
  onTimeUpdate={videoTimeUpdate}
  className={isMobile ? "d-block d-md-none quizVideo" : "d-none d-md-block quizVideo"}
  controls={false} // 关闭原生控件
  autoPlay={playing}
  ref={videoRef}
  src={isMobile ? videosMobile[currentVideo] : videos[currentVideo]}
>
  <MediaProvider />
</MediaPlayer>

2. 手动添加自定义音量控制按钮，通过videoRef控制音量：

// 示例：音量增减按钮
<button onClick={() => {
  if (videoRef.current) {
    videoRef.current.volume = Math.max(0, videoRef.current.volume - 0.1);
  }
}}>音量-</button>
<button onClick={() => {
  if (videoRef.current) {
    videoRef.current.volume = Math.min(1, videoRef.current.volume + 0.1);
  }
}}>音量+</button>

3. 如需播放/暂停控制，同样通过videoRef实现：

<button onClick={() => {
  if (videoRef.current) {
    videoRef.current.paused ? videoRef.current.play() : videoRef.current.pause();
  }
}}>{playing ? "暂停" : "播放"}</button>

方案二：CSS Hack（临时过渡方案，可能随iOS版本失效） #

通过调整控件面板宽度，将不需要的控件挤出可视区域，仅保留音量控件：

/* iOS 端适配 */
.quizVideo video::-webkit-media-controls-enclosure {
  overflow: hidden;
}
.quizVideo video::-webkit-media-controls-panel {
  width: calc(100% + 60px); /* 调整数值，将右侧全屏、字幕等控件挤出 */
  margin-left: -30px;
}

注：此方法依赖iOS控件的布局结构，不同版本可能出现适配问题，仅建议临时使用。

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