controlslist是HTML规范中的提示而非强制指令,仅在controls存在时建议隐藏特定按钮,但浏览器可忽略;主流支持仅nodownload、nofullscreen、noremoteplayback三值,其余多为纸面规范。

controlslist 不是权限开关,而是浏览器提示
controlslist 的本质是 HTML 规范中定义的「提示(hint)」,不是强制指令。它只在 controls 存在的前提下起作用,告诉浏览器“建议隐藏这些按钮”,但浏览器有权忽略——尤其是 Firefox(截至 v128)完全不解析该属性,Safari 对 nofullscreen 支持不稳定,iOS 上双击仍可能触发全屏。
常见误判场景:
- 写了
controlslist="nodownload"却发现右键菜单仍有“另存为”,因为 Chrome 仅隐藏控件栏下载按钮,不干预上下文菜单 - 加了
nofullscreen后视频仍能全屏,原因可能是:未同步设置allowfullscreen="false"和webkitallowfullscreen="false" - 移动端(尤其 iOS Safari)即使设置了
noremoteplayback,AirPlay 图标仍可能在系统级控制中心出现
哪些 controlslist 值实际生效,哪些只是纸面规范
目前真正被主流引擎部分落地的值只有三个:
-
nodownload:Chrome/Edge/Opera 控件栏中移除下载按钮;Firefox 忽略;安卓 WebView 多数无效 -
nofullscreen:Chrome/Edge/Opera 隐藏全屏按钮;Safari 16.4+ 开始支持,但需配合allowfullscreen="false"才较可靠 -
noremoteplayback:Chrome 和 Safari 均支持,可隐藏投屏按钮(Chromecast/AirPlay),但无法阻止系统级投屏入口
以下值基本无实现:
-
noaudio、novolume:规范草案中存在,但无任何浏览器支持 -
noplaybackrate:部分文档提及,实测 Chrome 125+ 仍显示播放速率按钮 -
noquality:仅在 MSE 或 HLS 自定义流中由 JS 控制,原生controls下不生效
controlslist 与 disablePictureInPicture 的权限边界差异
disablePictureInPicture 是独立布尔属性,和 controlslist 无关,但它比 controlslist 更接近“权限控制”:
-
disablePictureInPicture能真正禁用画中画按钮(控件栏 + 右键菜单),Chrome/Safari 均支持 - 而
controlslist没有no-picture-in-picture这类值,试图用nodownload或nofullscreen间接影响画中画,完全无效 - 若需彻底关闭画中画,必须显式写
disablepictureinpicture,且最好再监听enterpictureinpicture事件并调用document.exitPictureInPicture()
真正需要定制控件时,controlslist 就该被绕开
当业务要求“隐藏下载按钮 + 禁用全屏 + 移除音量滑块 + 自定义进度条样式”,controlslist 已无意义——它只能删按钮,不能改样式、不能加逻辑、不能响应手势。
- 第一步:移除
controls属性,否则原生控件一定渲染 - 第二步:用
video.play()/video.pause()/video.currentTime等 API 实现基础交互 - 第三步:手写
<div>+<input type="range">+ CSS 控制 UI,此时才能真正决定“要不要这个按钮”“点它干啥”“长什么样” - 注意:iOS 上若需有声播放,首次交互前必须
muted autoplay playsinline,否则play()会静音失败
最容易被忽略的是:controlslist 生效的前提,是视频资源已加载元数据(loadedmetadata 事件触发后),否则控件栏本身都还没渲染,更别说精简按钮了。

















