iOS Safari 和基于 WebKit 的浏览器（如 Edge for iOS）在播放 元素时默认强制全屏，尤其在调用 getUserMedia 启动摄像头后。本文详解通过 playsinline 属性+配套配置实现内联播放，确保视频严格渲染在指定容器内，不跳出、不遮挡 UI。
ios safari 和基于 webkit 的浏览器在播放 `
在 iOS 移动端（尤其是 Safari 和 Edge for iOS）中，使用 navigator.mediaDevices.getUserMedia() 获取摄像头视频流并绑定到 <video></video> 元素后，浏览器会无视 CSS 尺寸与布局约束，自动将视频提升至全屏层级渲染——这导致你精心设计的灰色视频容器（如 CodePen 示例中的 <video></video> 区域）被“覆盖”或“挤出视口”，严重影响交互体验。
根本原因在于：iOS WebKit 默认对带有音视频内容的 <video></video> 元素启用「自动全屏策略」（Auto-Fullscreen Policy），以适配移动端沉浸式观看习惯。但摄像头预览场景恰恰需要内联（inline）可控渲染——即视频必须严格嵌入 DOM 流，服从 width/height、object-fit 等样式控制。
✅ 正确解法：三步强制内联播放
-
添加
playsinline属性（必需）
该布尔属性明确告知 WebKit：允许视频在页面内联播放，禁用自动全屏行为。需直接写在 HTML 标签中（JavaScript 动态设置无效）：<video autoplay playsinline muted controls></video>
⚠️ 注意：
muted属性同样关键——iOS 要求自动播放（autoplay）的视频必须静音，否则会被静音且可能触发策略降级。 -
确保 JavaScript 播放逻辑兼容
在handleStream()中，应在设置srcObject后显式调用play()，并捕获可能的 Promise 拒绝（iOS 对自动播放限制严格）：const handleStream = (stream) => { video.srcObject = stream; // 必须显式调用 play()，且处理拒绝 video.play().catch(err => { console.warn("Auto-play prevented:", err); // 可在此触发用户手势引导（如显示“点击开始”按钮） }); play.classList.add('d-none'); pause.classList.remove('d-none'); screenshot.classList.remove('d-none'); }; -
强化 CSS 控制，防止缩放失真
即使启用playsinline，iOS 仍可能因视频原始宽高比与容器不匹配而拉伸。推荐添加：video { width: 100%; height: auto; /* 或固定高度，如 400px */ object-fit: cover; /* 保持比例裁剪填充 */ background-color: #ccc; /* 替代“灰色视频框”的视觉锚点 */ }
? 验证是否生效？
- 打开 Safari 开发者工具（macOS + iOS 连接调试）→ 检查
<video></video>元素是否包含playsinline=""； - 在控制台执行
video.webkitDisplayingFullscreen，返回false表示已脱离全屏状态； - 实际真机测试：视频应稳定渲染在指定区域，拖动页面、切换标签页均不中断。
? 进阶提示：
- 若仍偶发全屏，检查是否遗漏
muted或存在未捕获的play()Promise 拒绝； - 不要依赖
webkit-playsinline（旧版私有属性），playsinline是当前标准且 iOS 10+ 全面支持； - 对于需要用户交互触发的场景（如点击按钮启动摄像头），可移除
autoplay，改用button.addEventListener('click', () => video.play())，更符合 iOS 策略。
遵循以上配置，你的摄像头预览将彻底告别“跳屏”困扰，真正实现专业级内联视频流控——无论是证件拍摄、AR 初体验还是实时美颜应用，UI 布局都将始终精准可靠。
