controls 属性仅控制原生控件 UI 渲染，具体按钮由浏览器决定且跨平台差异大；默认含播放/暂停、进度条、音量、全屏、字幕/音轨开关；无重播、倍速、画中画等扩展按钮；controlslist 仅支持 nodownload/noremoteplayback/nofullscreen 三个空格分隔指令，Safari 完全不支持；移动端播放策略分裂，iOS 强制用户手势触发首播，Android 支持静音自动播放；移除 controls 后需自行实现播放逻辑、进度同步、音量控制及 iOS 手势兼容。

加了 controls 就出控件，但具体显示哪些按钮，不完全由你控制——浏览器决定，且各平台差异明显。

默认控件包含哪些功能按钮

主流浏览器（Chrome、Edge、Firefox、Safari）在启用 controls 后，通常会渲染以下基础按钮或区域：

• 播放/暂停按钮（核心必显）
• 进度条（含可拖动滑块）
• 音量调节（含静音切换）
• 全屏按钮（nofullscreen 可隐藏，但 Safari 忽略）
• 字幕开关（当有 track 元素且 type="subtitles" 时）
• 音轨选择（当有多个 track 且 kind="captions"/"descriptions" 时）

注意：没有“重播”“倍速”“画中画”等按钮——这些属于扩展能力，需 JS 调用 requestPictureInPicture() 或手动实现；也没有“分享”“收藏”等业务按钮，它们不在原生控件范畴内。

controlslist 能隐藏哪些按钮（及兼容性陷阱）

controlslist 是唯一能微调原生控件可见性的属性，但它只支持三个指令，且 Safari 完全无视：

• nodownload：移除下载图标（但右键「另存为」仍可用）
• noremoteplayback：隐藏投屏按钮（如 Chromecast、AirPlay）
• nofullscreen：隐藏全屏按钮（⚠️不影响 video.requestFullscreen() JS 调用）

错误写法：controlslist="no-download"（连字符无效）、controlslist="nodownload, nofullscreen"（逗号分隔无效，必须空格）；正确写法：。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

iOS 和 Android 的控件行为根本不同

移动端不是“少几个按钮”的问题，而是底层交互逻辑分裂：

• iOS Safari：即使写了 controls，首次播放仍强制要求用户真实点击（click 或 touchend），play() 不能提前调用，也不能包在 setTimeout 或 Promise 里
• Android Chrome：支持 muted autoplay 自动播放，但若视频含音频且未 muted，play() 会直接抛 NotAllowedError
• 两者都无视 controlslist 在 iOS 上的任何效果；Android 大部分版本支持，但旧版 WebView 可能不识别

删掉 controls 后，你真正要面对的不是样式，是播放策略

很多人以为去掉 controls 就是“换套 UI”，实际是切换整套运行时约束：

• 必须监听 canplaythrough 才能安全启用播放按钮（canplay 不够，缓冲可能中断）
• 进度条拖动要自己绑定 input + change 事件，并手动同步 video.currentTime 和 UI 显示
• 音量控制不能只改 video.volume，还得处理 muted 状态切换与图标联动
• 最麻烦的是 iOS：哪怕你做了所有 JS 控制，首次播放仍得卡在用户手势里，且静音策略绕不过

真正容易被忽略的点是：控件是否显示，和资源能否加载、能否触发播放，是四层独立问题——controls 只管第一层 UI 渲染，后面三层层层设防。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！