HTML如何标记文档的媒体控制器_HTML标记文档媒体控制器标签【标签】

html 里没有叫“媒体控制器”的独立标签，真正起作用的是 <video></video> 和 <audio></audio> 自带的 controls 属性。

为什么加了 controls 才有播放器界面

浏览器默认不显示任何控件——这是设计使然，不是 bug。只有显式声明 controls，浏览器才渲染原生播放器 ui（播放/暂停、进度条、音量等）。

常见错误现象：<video src="demo.mp4"></video> 页面上只有一片黑或占位图，点击没反应。

• controls 是布尔属性，写成 controls 或 controls="" 都行，但不能写成 controls="false"（那依然生效）
• 想禁用控件？直接删掉这个属性，别用 controls="false"
• 自定义样式时，controls 一删，所有原生按钮就没了，得自己用 js + play()、pause() 等方法重做

<video></video> 和 <audio></audio> 的控件行为差异

两者都支持 controls，但默认 UI 布局不同：视频会显示画布区域+控件栏，音频只显示一行控件（无画面区）。

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

使用场景：嵌入播客用 <audio controls></audio> 更轻量；教学视频必须用 <video controls></video>，否则用户看不到画面也点不了播放。

• <video></video> 在无 controls 且无 JS 控制时，完全不可交互
• <audio></audio> 同样不可交互，但部分旧版 safari 曾在无 controls 时仍显示简陋控件（已基本消失）
• 移动端 ios Safari 强制要求 controls 存在才能触发自动播放（即使设了 autoplay）

用 controlslist 微调原生控件（chrome/edge/firefox 支持）

这是个常被忽略的补充属性，能隐藏特定按钮，比如去掉下载按钮或全屏按钮。

参数差异：controlslist="nodownload noremoteplayback nofullscreen" —— 多个值用空格分隔，不是逗号。

• nodownload：移除下载图标（但右键另存为仍可能可用）
• noremoteplayback：禁用投屏按钮（如 ChromeCast）
• nofullscreen：隐藏全屏按钮（注意：不影响 requestFullscreen() JS 调用）
• Safari 目前不支持 controlslist，别指望它跨浏览器一致生效

真正麻烦的不是加不加 controls，而是删掉它之后，你得亲手处理 play() 失败异常、canplaythrough 事件监听、以及 iOS 上必须用户手势触发播放的限制——这些比写个 controls 多十倍代码量。