HTML5中无法通过CSS精确隐藏原生video控件按钮，唯一可靠方式是禁用controls属性、用JS+自定义UI实现响应式控制栏，并通过媒体查询在手机端隐藏非核心按钮。
在 HTML5 中，<video> 标签本身不支持按设备类型动态增删原生控件（如 controls 属性是布尔值，无法响应式切换），但可以通过 CSS 隐藏特定控制按钮——前提是使用自定义控件（即禁用原生 controls，自行构建 UI）。原生播放器的内部按钮（如全屏、音量、字幕等）**无法被 CSS 精确选择并隐藏**，因为它们属于 Shadow DOM 内部，且浏览器未暴露标准伪元素接口（::-webkit-media-controls 等已逐步弃用或行为不一致）。
✅ 正确思路：禁用原生 controls，用 JS + 自定义 UI 实现响应式控制栏
这是唯一可靠、跨设备、可维护的方式：
- 设置
<video controls="false">或省略controls，完全关闭原生控件 - 用 HTML + CSS 构建自己的播放/暂停、进度条、音量、全屏等按钮
- 通过媒体查询（
@media (max-width: 768px)）在手机端隐藏非核心按钮（如“画中画”、“字幕选择”、“倍速下拉”等） - 用 JavaScript 绑定事件（
play()、pause()、volume、requestFullscreen()等）驱动自定义控件
? 手机端精简示例（CSS 媒体查询隐藏冗余按钮）
假设你有如下自定义控制栏结构：
<div class="video-controls"> <button class="btn-play">▶</button> <input type="range" class="progress-bar"> <button class="btn-volume">?</button> <button class="btn-pip">?</button> <button class="btn-captions">?</button> <button class="btn-speed">1x</button> </div>
在手机端只保留播放、进度、音量三个最常用功能：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.btn-pip,
.btn-captions,
.btn-speed {
display: none;
}
}
⚠️ 注意：不要依赖废弃的伪元素 hack
过去有人尝试用 ::-webkit-media-controls 伪类隐藏按钮，例如：
video::-webkit-media-controls-fullscreen-button { display: none; }
但这类写法：
- 仅限旧版 Chrome/Safari，现代浏览器已移除或限制支持
- 无标准规范，Firefox/Edge 完全不识别
- 无法精准控制“是否显示”，更无法响应式切换
- 违反可访问性（a11y），屏幕阅读器可能无法识别自定义逻辑
? 推荐增强方案（兼顾体验与兼容）
在自定义控件中加入智能判断：
- 检测
matchMedia('(hover: none) and (pointer: coarse)')判断是否为触屏移动设备 - 小屏下默认隐藏高级按钮，点击“更多”展开（类似 YouTube 移动端）
- 保持播放/暂停按钮足够大（最小 48×48px），符合移动端触摸热区规范
- 用
<video playsinline webkit-playsinline>确保 iOS 不强制全屏
