在 iPhone Safari 中使用 getUserMedia 捕获相机视频时，页面 元素常被强制全屏显示，破坏布局；只需为 video 标签添加 playsinline 属性并配合 autoplay 和 muted，即可强制内联渲染，保持在指定容器中正常显示。
在 iphone safari 中使用 `getusermedia` 捕获相机视频时，页面 `
iOS Safari（尤其是 iPhone）对 <video></video> 元素的播放行为有严格策略：默认禁止静音/非用户手势触发的自动播放，且会将未明确声明内联策略的媒体元素自动提升至全屏模式——这正是你在 CodePen 示例中观察到“灰色视频框消失、画面跳转全屏”的根本原因。该行为并非 Bug，而是 Apple 基于用户体验与性能优化（如功耗控制、防误触）所设计的主动限制。
✅ 正确解决方案是显式声明内联播放策略，需同时满足以下三个 HTML 属性：
<video id="camera-video" autoplay muted playsinline controls="false"></video>
-
autoplay：允许视频在流就绪后立即播放（iOS 要求必须配合muted）； -
muted：静音是 iOS Safari 启用autoplay的硬性前提； -
playsinline：最关键属性，明确告知浏览器“请在当前文档流内渲染，禁用自动全屏”。
⚠️ 注意事项：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 仅添加
playsinline不足以生效——若缺少autoplay或muted，Safari 仍可能拒绝内联渲染或直接阻断播放； - JavaScript 动态设置无效：
video.setAttribute('playsinline', '')在 iOS 上不被识别，必须在 HTML 源码或通过innerHTML插入时静态声明； - 若使用 Vue/React 等框架，请确保该属性以原生 HTML 属性方式透传（如 React 中用
playsInline驼峰写法，但最终渲染必须为小写playsinline）； - 针对
getUserMedia流，还需确保video.srcObject = stream后调用video.play()（现代 Safari 已支持 Promise 化play()，建议捕获错误）：
video.srcObject = stream;
video.play()
.catch(err => console.warn("Auto-play prevented:", err.message));
? 补充调试建议：
- 检查 Safari 设置 → “网站” → “全屏” → 将目标站点设为“拒绝”，防止网页调用
requestFullscreen()干扰； - 确保页面
<meta name="viewport">包含width=device-width, initial-scale=1，避免因缩放导致布局异常； - 如仍出现全屏跳转，可在
video上监听webkitbeginfullscreen事件进行拦截（仅作诊断，不可替代playsinline）：
video.addEventListener('webkitbeginfullscreen', e => {
e.preventDefault();
console.log('Fullscreen blocked — ensure playsinline is set');
});
综上，playsinline 是 iOS Web 视频内联化的基石属性。它不是可选项，而是面向 iPhone Safari 的必备实践。结合 autoplay + muted 的三要素组合，可稳定实现相机流在指定 <video></video> 容器内的原生、可控、非侵入式渲染，彻底告别意外全屏干扰。
