controls是布尔属性，存在即生效，正确写法为；不显示常见原因包括视频未加载、CSS隐藏、preload="none"、Shadow DOM裁剪或iOS需配合playsinline等。

直接在 标签里写上 controls 这个布尔属性，浏览器就会显示原生播放控制条——它不接受值，也不需要赋值，存在即生效。

比如这样就对了：

<video src="demo.mp4" controls></video>

如果写了但没显示，问题通常不在语法，而在其他环节。

DeepBI DHTML 页面生成器

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

下载

控制条不出现的常见原因

• 视频资源根本没加载成功
  检查 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 属性的写法注意事项

• ✅ 正确写法：、（空字符串也行，但冗余）
• ❌ 错误写法：（少一个 s）、（布尔属性不解析值）、（虽能生效，但不符合规范）

如果想“默认显示、点击后隐藏”

这不是 controls 属性能动态控制的。浏览器不支持运行时增删 controls 来切换控件显隐——多数情况下 removeAttribute('controls') 或 video.controls = false 都无效。
真正可靠的做法是：

• 初始不加 controls
• 用 JS 实现播放/暂停/进度条等逻辑
• 用自定义按钮控制显隐状态，并同步 play() / pause() 等行为

不复杂但容易忽略。