iOS Safari 和基于 WebKit 的浏览器（如 Edge for iOS）默认会对 元素中的实时摄像头流强制启用全屏播放，影响网页布局与交互体验；添加 playsinline 属性可强制视频内联播放，使其严格按 HTML 尺寸渲染在指定容器中。

ios safari 和基于 webkit 的浏览器（如 edge for ios）默认会对 `

在 iOS 上使用 navigator.mediaDevices.getUserMedia() 捕获摄像头视频流时，一个常见却易被忽视的问题是：即使你已为 <video></video> 元素设置了明确的宽高、CSS 样式（如 width: 320px; height: 240px; background: #eee;），Safari 仍会无视容器约束，自动将视频提升至全屏模式——尤其在调用 video.play() 后。这不仅破坏 UI 布局，还可能导致按钮遮挡、交互失焦，严重影响 H5 视频采集类应用（如在线证件拍摄、AR 预览、远程问诊等）的可用性。

根本原因在于：iOS Safari 对 <video></video> 元素启用了严格的“沉浸式媒体策略”（immersive media policy），当检测到 srcObject 为实时媒体流（MediaStream）且未显式声明播放行为时，会默认触发全屏。而解决方案非常简洁——只需添加原生 HTML 属性 playsinline：

<video id="camera-video" autoplay playsinline muted></video>

✅ 必须同时满足以下三点才能稳定生效：

仿UC浏览器官方网站全屏jQuery幻灯片

仿UC浏览器官方网站全屏jQuery幻灯片

下载

• playsinline：强制内联播放（必需）；
• autoplay：避免用户手动点击播放（iOS 要求自动播放需静音）；
• muted：iOS 要求 autoplay + playsinline 组合下必须静音，否则仍可能被拦截或降级为全屏。

⚠️ 注意事项：

• 该属性仅对 iOS WebKit 内核有效（Safari、Edge、Chrome for iOS 等均受此限制），Android Chrome / Firefox 不受影响；
• playsinline 是布尔属性，无需赋值（写成 playsinline="true" 无效）；
• 若使用 JavaScript 动态创建 video 元素，务必在 appendChild 前设置：

  const video = document.createElement('video');
  video.autoplay = true;
  video.playsInline = true; // 注意：JS 中为 camelCase
  video.muted = true;
  video.srcObject = stream;

此外，为增强兼容性与健壮性，建议补充以下最佳实践：

• 在 CSS 中显式定义 video 的尺寸与 object-fit：

  video {
    width: 100%;
    height: 300px;
    object-fit: cover; /* 保持比例填充，裁剪溢出 */
    background: #f0f0f0;
  }

• 初始化时检查并设置 webkit-playsinline（旧版 iOS 兼容）：

  video.setAttribute('webkit-playsinline', 'true');

总结：playsinline 是解决 iOS 视频流全屏劫持问题的最小必要解。它不依赖第三方库、无需 polyfill，仅需一行 HTML 属性 + 静音保障，即可让摄像头画面精准嵌入设计容器，真正实现“所见即所得”的 H5 视频采集体验。