controlslist="nofullscreen" 无效是因为该属性已被chrome废弃且firefox、safari从未支持；真正兼容的方案是用css伪元素隐藏按钮（如::-webkit-media-controls-fullscreen-button），并配合javascript禁用全屏行为。
controlslist="nofullscreen" 为什么没隐藏全屏按钮
因为 controlslist="nofullscreen" 在大多数浏览器中根本不起作用——它不是广泛支持的属性，Chrome 从 73 版本起就废弃了该特性，Firefox 和 Safari 从未实现。你加了但按钮还在，不是写错了，是浏览器压根不认。
真正能隐藏全屏按钮的兼容方案
必须用 CSS 覆盖原生控件样式，且需注意不同浏览器的伪元素命名差异：
- Chrome / Edge（基于 Chromium）：用
::-webkit-media-controls-fullscreen-button - Firefox：用
::moz-media-controls-fullscreen-button - Safari（macOS/iOS）：目前无公开伪元素可隐藏，只能移除整个 controls 再自定义，或接受其存在
实操建议：
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
video::-moz-media-controls-fullscreen-button {
display: none !important;
}
⚠️ 注意：!important 必须加，否则被原生样式覆盖；display: none 是唯一可靠方式，visibility: hidden 或 opacity: 0 仍会占位、可能触发点击穿透。
隐藏后还要处理键盘快捷键和右键菜单
仅隐藏按钮不能禁用全屏行为——用户仍可通过 F 键、Ctrl+Shift+F 或右键菜单触发全屏：
- 监听
keydown拦截常用快捷键（但无法拦截所有组合，且部分系统级快捷键不可阻止） - 右键菜单无法通过 CSS 禁用，需配合
oncontextmenu="return false"（但会同时禁用所有右键操作） - 更彻底的做法：不用原生 controls，改用
controls="false"+ 自定义 UI，自己决定暴露哪些功能
为什么不要依赖 controlslist 属性
controlslist 原本是 Chrome 实验性属性，规范未采纳，MDN 明确标记为 Deprecated。现在连 Chrome DevTools 都不再显示该属性生效提示。实际项目中把它当 fallback 或文档说明可以，但绝不能作为功能实现依据。
真要控制全屏能力，优先走 JavaScript API 路线：element.requestFullscreen() 可以拒绝调用，document.exitFullscreen() 可主动退出，再配合 CSS 隐藏按钮，才是可控路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
