video标签添加controls布尔属性即可显示默认控件，无需赋值；控件不显示常见原因包括src缺失、preload="none"、CSS隐藏或Shadow DOM样式隔离；自定义控件需移除controls并用API手动实现；iOS Safari需playsinline、autoplay+muted或用户交互后控件才生效。

video 标签加 controls 属性就能显示默认控件

只要在 <video></video> 标签里写上 controls 这个布尔属性，浏览器就会自动渲染播放/暂停、进度条、音量、全屏等原生控件。不需要设值，也不需要写 controls="true" —— 写了反而可能被某些解析器当成字符串值处理。

常见错误：控件不显示的几个典型原因

即使写了 controls，控件仍不出现，大概率是下面这几个问题：

• src 属性缺失或路径错误，视频资源根本没加载成功（控制台会报 MediaError 或 404）
• 用了 preload="none" 且尚未触发播放，部分浏览器（如 Safari）在未加载元数据前会延迟渲染控件
• CSS 中对 video 元素设置了 display: none 或 visibility: hidden，控件随容器一起被隐藏
• 在 Web Components 或 Shadow DOM 中使用时，样式隔离导致控件区域不可见（需检查 shadow root 渲染是否完整）

想自定义控件？先关掉 controls 再手动实现

一旦加了 controls，你就无法用 JS 直接操作内部按钮（比如改播放按钮图标），因为这些控件是浏览器 UA 样式渲染的，不在 DOM 树中暴露为可选中节点。要自定义，必须：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 去掉 controls 属性
• 用 play()、pause()、currentTime、volume 等 API 手动控制
• 监听 timeupdate、loadedmetadata、ended 等事件同步状态
• 自己画一个进度条并绑定 input 或 change 事件去设置 currentTime

<video id="myVideo" src="demo.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<input type="range" min="0" max="100" value="0" id="progress">

移动端 Safari 的特殊限制

iOS 和 iPadOS 上的 Safari 默认会隐藏控件，除非满足以下任一条件：

立即学习“前端免费学习笔记（深入）”；

• 加了 playsinline 属性（否则强制全屏）
• 加了 autoplay + muted（但用户首次交互后才允许有声播放）
• 用户已与页面发生过手势交互（如点击、触摸），之后再调用 load() 或设置 src 并调用 play()，控件才可能正常出现

单纯只写 controls 在 iOS 上经常“看起来没反应”，不是 bug，是策略性限制。