controlslist="nofullscreen" 无效是因为它仅在ios safari(10+)和部分android chrome(75+)中生效,且必须配合playsinline和webkit-playsinline使用;桌面端chrome、firefox、edge完全忽略该属性。

controlslist="nofullscreen" 为什么没效果
直接写 controlslist="nofullscreen" 很大概率无效——这不是浏览器支持问题,而是它只在特定条件下起作用:必须配合 webkit-playsinline 和 playsinline 属性使用,且仅对 iOS Safari 和部分 Android Chrome 生效。桌面端 Chrome、Firefox 完全忽略该属性。
哪些浏览器真正支持 nofullscreen
目前只有:
- iOS Safari(10+):需同时设置
playsinline和webkit-playsinline - Android Chrome(75+):仅当视频嵌入 WebView 或 PWA 场景下部分生效,普通网页不保证
桌面端所有主流浏览器(Chrome/Firefox/Edge)均不解析 controlslist 中的任何值,包括 nofullscreen、nodownload 等。
真正能隐藏全屏按钮的实操方法
靠 HTML 属性不行,得用 CSS + JS 组合压制:
- 用
::-webkit-media-controls-fullscreen-button伪元素隐藏按钮(仅 WebKit 内核) - 对非 WebKit 浏览器(如 Firefox),用
video::-moz-fullscreen-button(但 Firefox 实际不暴露该伪元素,只能退而求其次) - 最可靠方式:移除原生 controls,自定义控件;或用
document.exitFullscreen()+video.addEventListener("fullscreenchange", ...)主动退出 - 关键补丁:给
<video></video>加disablepictureinpicture,否则 PiP 按钮可能替代全屏入口
示例 CSS(仅限 Safari):
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
为什么禁用全屏按钮这么难
因为全屏是浏览器级权限行为,HTML 标准从未赋予开发者“禁用 UI 元素”的能力,controlslist 是厂商实验性扩展,不是规范。iOS 强制要求视频默认 inline 播放,所以才开放了有限控制权;安卓和桌面端坚持“用户主权”,不允许网页剥夺全屏入口。
真正要阻止全屏,唯一稳定路径是不用原生 controls,自己画一套控件,并全程接管 requestFullscreen() 调用——但这也拦不住用户右键菜单或快捷键(F11)。别指望纯 HTML 解决。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











