Safari视频无法全屏主因是video标签缺失playsinline和webkit-playsinline属性、requestFullscreen()未在用户手势中调用、设备旋转锁定开启、网站全屏权限被禁，或未通过“添加到主屏幕”绕过浏览器限制。
前端网页视频在Safari浏览器无法触发全屏播放，常见原因是网页未正确声明视频元素的全屏兼容属性、用户交互缺失导致API被拦截、设备旋转锁定开启、或Safari自身权限策略阻止了requestFullscreen()调用。这些问题会直接导致点击全屏按钮无响应、控件不显示、横屏后画面卡在窄幅状态。
检查并修正video标签的HTML属性
iOS Safari对<video>标签的全屏能力有硬性要求：必须同时存在playsinline和webkit-playsinline两个属性，且必须在HTML源码中静态写入，不能靠JavaScript动态添加。
方法一：直接修改HTML源码，在<video>标签内补全这两个属性：
<video controls playsinline webkit-playsinline src="video.mp4"></video>
立即学习“前端免费学习笔记（深入）”；
方法二：若使用Vue/React等框架，确保该属性在组件首次渲染时就存在于DOM上——不要在mounted或useEffect里通过setAttribute追加，iOS Safari不会识别运行时注入的webkit-playsinline。
【必须同时写两个属性，漏掉webkit-前缀或拼错成playinline（少s）都会失效】
确保全屏调用由用户手势触发
Safari强制要求：所有requestFullscreen()调用必须发生在用户事件回调内（如click、touchend），否则静默失败，控制台不报错但毫无反应。
第一步：确认你的全屏按钮绑定的是原生事件，不是自定义事件或Promise回调。
第二步：检查JS代码是否形如以下安全写法：
button.addEventListener('click', () => { videoEl.requestFullscreen(); });
第三步：避免在autoplay完成后的play事件里直接调用全屏——这不算有效用户手势，iOS会拒绝。
第四步：如果用了自定义控件，别再调用已废弃的webkitEnterFullscreen()，它在iOS 15+完全失效。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
关闭设备屏幕旋转锁定
iPad和iPhone上，Safari视频全屏高度依赖横屏手势；一旦系统级旋转锁定开启，页面根本不会响应横屏，全屏按钮也不会出现。
从屏幕右上角向下滑动打开控制中心。
找到带锁形图标的“屏幕旋转锁定”按钮，若呈高亮状态，点击一次关闭。
将设备横向握持，等待页面自动适配——多数主流视频站（B站、腾讯视频等）会在横屏瞬间自动进入全屏或弹出全屏按钮。
启用网站全屏权限
Safari默认禁止第三方网站调用全屏API，需手动授权。这个设置直接影响videoEl.requestFullscreen()能否成功执行。
在Safari中打开目标视频页面，点击地址栏左侧的锁形图标。
选择“网站设置”→滚动到底部→找到“全屏”选项→设为“允许”。
刷新页面后重试全屏操作。若此前从未访问过该域名，此步骤可能被跳过，务必手动确认。
绕过浏览器限制：添加到主屏幕
将网站以“添加到主屏幕”方式安装后，它将以独立Web应用形式运行，不显示地址栏、工具栏，且绕过Safari对全屏API的部分调用限制。
在Safari中打开视频网站，播放一个视频确保基础功能正常。
点击底部分享图标（方框加向上箭头）→选择“添加到主屏幕”→命名后点击“添加”。
返回主屏幕，点击新图标启动网站，再播放视频——此时全屏按钮更稳定，响应更快。
