video标签需同时添加webkitallowfullscreen和allowfullscreen属性才能在Chrome、Safari等浏览器中正常全屏；仅controls不够，且JS调用requestFullscreen()必须在用户手势同步上下文中执行。
video 标签缺少 webkitallowfullscreen 和 allowfullscreen 属性
HTML5 在 Chrome、Safari 等浏览器中无法全屏，最常见原因是缺失全屏权限声明。现代浏览器默认禁用 iframe 或 video 的全屏能力，必须显式授权。
正确写法需同时包含两个属性：
-
allowfullscreen是标准属性，Firefox、Edge、Chrome 90+ 都依赖它 -
webkitallowfullscreen是 Safari 和旧版 Chrome 的兼容必需项（即使当前版本仍建议保留） - 仅加
controls不足以触发全屏按钮显示；缺少任一属性，全屏按钮可能灰显或直接不出现
JavaScript 调用 requestFullscreen() 被浏览器拦截
通过 JS 主动调用全屏（如点击自定义按钮后执行 video.requestFullscreen()）失败，基本都是因为违反了“用户手势触发”策略——浏览器只允许在用户真实交互（click、touchend）的同步调用链中启动全屏。
- 不能在
setTimeout、fetch回调、load事件里调用requestFullscreen() - 不能在
click处理函数中异步调用（比如包一层Promise.resolve().then(...)就会失效） - 推荐写法：直接在事件回调内同步调用，且确保
video元素已插入 DOM 并可访问
示例安全调用：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('myBtn').addEventListener('click', () => {
document.getElementById('myVideo').requestFullscreen();
});
父容器或 CSS 强制限制了全屏行为
即使标签和 JS 都正确，视频仍无法全屏，可能是被外层样式或嵌套结构干扰。常见干扰点：
- 父级 设置了
overflow: hidden或transform，导致全屏后内容被裁剪或定位异常被包裹在中，但该 iframe 缺少allow="fullscreen"属性（注意不是allowfullscreen）- CSS 中对
video:-webkit-full-screen、video:fullscreen等伪类设置了display: none或visibility: hidden检查方法：打开开发者工具 → 切换到全屏 → 查看元素面板是否高亮了
:fullscreen状态，再逐层检查 computed styles。移动端 iOS Safari 的特殊限制
iOS Safari 对
全屏有硬性约束：只有设置playsinline属性的视频，才允许通过原生控件进入全屏；否则点击全屏按钮会直接跳转到系统播放器（脱离网页上下文）。- 若需网页内全屏（比如配合 WebGL 渲染或自定义 UI），必须加
playsinline+webkit-playsinline - 但加了之后，iOS 默认不再自动全屏 —— 必须靠 JS
requestFullscreen()触发，且仍要满足用户手势条件 - 部分 iOS 版本对
video的width/height为auto或100%时拒绝全屏，建议设为具体像素值或100vw/100vh
最小可行 iOS 全屏 video 标签：
全屏逻辑复杂点往往不在代码写没写对，而在浏览器策略细节叠加后的隐性冲突——比如 Safari 的
playsinline和 Chrome 的allowfullscreen同时生效却互相影响，这种组合问题最容易漏查。
