HTML视频controlslist怎么隐藏全屏按钮-html教程-PHP中文网

controlslist="nofullscreen"在chrome/edge中部分生效，可隐藏右下角全屏按钮但不阻止双击或系统手势；firefox完全忽略，safari支持极弱；必须配合controls属性且仅在安全上下文（https或localhost）中有效。

html视频controlslist怎么隐藏全屏按钮

controlslist="nofullscreen" 在 Chrome/Edge 中是否生效

它能隐藏右下角的全屏按钮，但不保证双击视频或系统手势（如 macOS 触控板四指上滑）被禁用。Firefox 完全忽略该属性，Safari 支持极弱，部分版本甚至不渲染该提示。

必须同时存在 controls 属性，否则 controlslist 会被浏览器直接丢弃——常见错误是只写 <video controlslist="nofullscreen"></video> 却漏了 controls。

nofullscreen 必须小写、无连字符、无多余空格（如 "nofullscreen" ✅，"no-fullscreen" ❌，"nofullscreen " ❌）
值需用双引号包裹，不能写成 controlslist=nofullscreen（缺引号 → 属性无效）
仅影响原生控件按钮，不影响键盘快捷键（F 或 Ctrl+Shift+F）、系统级全屏入口

为什么设置了 still 全屏按钮还在？

最常见原因是开发环境非安全上下文：用 file:// 打开页面，或 HTTP 非 localhost 域名。Chrome 会在控制台报警告：controlslist is not supported in insecure contexts，此时 nofullscreen 直接失效。

即使环境合规，iOS Safari 仍可能响应双击触发全屏；Android WebView 行为依赖底层 Chromium 版本，低于 Chrome 78 的版本不识别 nofullscreen。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

检查地址栏是否显示锁形图标（HTTPS 或 http://localhost / http://127.0.0.1）
在 Chrome DevTools 的 Console 中搜索 controlslist 看是否有警告
真机测试比模拟器更可靠——尤其是 iOS 上双击行为无法通过 CSS 或 JS 拦截

想真正禁用全屏，只能靠 JavaScript

移除 controls 后，全屏按钮自然消失，但你也失去了所有原生交互；若仍需保留播放/暂停等基础功能，就得手动接管全屏逻辑：

调用 videoElement.requestFullscreen() 前加判断，比如 if (userRole !== 'admin') return
监听 fullscreenchange 事件，检测到进入全屏后立即执行 document.exitFullscreen()
禁用双击：给 video 绑定 dblclick 并 preventDefault()（注意这会同时阻止自定义双击行为）
移动端需额外处理：iOS 上 video.webkitEnterFullscreen() 是私有 API，且仅限用户手势触发，无法静默调用

别指望 CSS 伪元素彻底解决

像 video::-webkit-media-controls-fullscreen-button { display: none; } 这类写法看似简单，但极其脆弱：Chrome 115+ 已废弃部分伪元素，WebKit 新版本改用 Shadow DOM 内部 class 名，每次浏览器更新都可能让样式失效。

更重要的是，这类 CSS 不具备逻辑控制能力——按钮不可见，但全屏功能本身未被禁用，用户仍可通过快捷键、菜单或系统手势进入全屏。