移动端视频内联播放需同时设置playsinline、webkit-playsinline和muted属性，配合用户手势触发play()并捕获异常，再通过CSS规范尺寸与容器行为。

移动端网页用 <video> 标签防止点击后强制全屏，关键不是只加 playsinline，而是组合属性 + 行为规范。iOS Safari 是主要“拦路虎”，它默认把视频当全屏播放器处理，必须明确告诉它：“请留在页面里播”。

必须写的 HTML 属性

这几个属性要一起写在 <video> 标签上，缺一不可：

• playsinline：标准属性，iOS 10+ 识别
• webkit-playsinline：兼容 iOS 9–10 的必需前缀（别写 webkit-playsinline="true"，布尔属性不赋值）
• muted：iOS 要求自动播放或内联播放稳定，必须静音；即使你后续想开声，也得先静音启动

autoplay 不是万能钥匙

仅加 autoplay 很可能没反应，尤其在 iOS 上：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 如果带声音（没 muted），autoplay 会被直接拦截，控制台报错 “The request is not allowed”
• 即使有 muted 和 playsinline，Safari 仍可能因上下文问题拒绝自动播放（比如在非用户手势触发的回调里调 play()）
• 更稳妥的做法：用按钮点击触发播放，或确保 autoplay 出现在用户交互之后（如 touchstart 后立刻调用）

JS 播放控制要加 .catch() 和显式调用

光靠 HTML 属性不够，JS 层也要配合：

• 拿到流或设置 src 后，必须显式调用 video.play()
• 一定要用 .catch() 捕获失败，比如用户禁了摄像头/麦克风，或系统策略阻止
• 示例：

  const video = document.getElementById('video');
  video.srcObject = stream;
  video.play().catch(err => {
    console.warn('Play failed:', err);
    // 可在此显示“点击开始”提示
  });
  

CSS 和容器也要配合

属性生效了，但视频拉伸、溢出或尺寸异常，也会破坏体验：

• 给 <video> 设明确宽高，或用 width: 100%; height: auto; 配合 object-fit: cover / contain
• 避免父容器设 overflow: hidden 或 transform，某些 iOS 版本下会干扰内联渲染
• 如果做背景视频，建议加 loop 和 preload="metadata" 提升加载效率