controls是布尔属性，存在即生效，正确写法为；不显示常见原因包括视频未加载、CSS隐藏、preload="none"、Shadow DOM裁剪或iOS需配合playsinline等。
直接在 <video></video> 标签里写上 controls 这个布尔属性，浏览器就会显示原生播放控制条——它不接受值，也不需要赋值，存在即生效。
比如这样就对了：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<video src="demo.mp4" controls></video>
如果写了但没显示，问题通常不在语法，而在其他环节。
控制条不出现的常见原因
视频资源根本没加载成功
检查src路径是否正确；打开浏览器开发者工具的 Network 面板，确认视频请求返回的是200状态码，且响应头Content-Type是正确的 MIME 类型（如video/mp4）。CSS 把整个 video 元素隐藏了
比如设置了display: none、visibility: hidden或opacity: 0，控件会随容器一起不可见。用了
preload="none"且尚未触发播放
Safari 等浏览器可能延迟渲染控件，直到元数据加载完成。可改用preload="metadata"或手动调用load()。在 Shadow DOM 或 Web Components 中使用
原生控件属于 UA shadow root，样式隔离可能导致控件区域被裁剪或不可见，需检查 shadow root 渲染完整性。-
移动端 Safari 的限制
iOS/iPadOS 上，仅写controls不足以保证控件稳定出现。必须配合：-
playsinline（防止强制全屏） -
webkit-playsinline（兼容旧版 Safari） - 用户首次手势交互后才允许正常唤起控件（比如先点一个按钮再播放）
-
controls 属性的写法注意事项
- ✅ 正确写法：
<video controls></video>、<video controls=""></video>（空字符串也行，但冗余） - ❌ 错误写法：
<video control></video>（少一个s）、<video controls="false"></video>（布尔属性不解析值）、<video controls="true"></video>（虽能生效，但不符合规范）
如果想“默认显示、点击后隐藏”
这不是 controls 属性能动态控制的。浏览器不支持运行时增删 controls 来切换控件显隐——多数情况下 removeAttribute('controls') 或 video.controls = false 都无效。
真正可靠的做法是：
- 初始不加
controls - 用 JS 实现播放/暂停/进度条等逻辑
- 用自定义按钮控制显隐状态，并同步
play()/pause()等行为
不复杂但容易忽略。
