微信视频默认全屏，需在HTML中硬编码playsinline="true"、webkit-playsinline="true"、x5-playsinline="true"、x-webkit-airplay="true"并配合muted和autoplay，且避免父容器transform、未设宽高及overflow:hidden等布局异常。
微信里视频一播就跳全屏，不是 bug，是它默认行为。要让它老老实实待在页面里播，得同时满足 iOS Safari 和微信 WebView 两套规则，缺一不可。
video 标签必须硬编码的属性组合
只写 playsinline 没用，iOS 和微信会直接忽略。必须在 HTML 初始标签里一次性写齐：
-
playsinline="true"（标准属性） -
webkit-playsinline="true"（iOS Safari 必须） -
x5-playsinline="true"（安卓微信必需，iOS 微信也认） -
x-webkit-airplay="true"（避免部分 iOS 微信降级到全屏播放器）
示例：<video playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="true" muted autoplay><source src="a.mp4"></video>
为什么 JS 动态加 playsinline 属性无效
iOS WebKit 只在 DOM 解析阶段读取 playsinline 类属性，挂载后用 video.setAttribute('playsinline', 'true') 或 video.playsInline = true 都不触发重评估。
微信公众号 AI 一条龙运营（总控）
下载
公众号运营｜微信公众号｜公众号一条龙｜公众号全流程｜自媒体运营｜微信自动化｜内容流水线｜AIGC 工作流 — 公众号一条龙运营总控入口，覆盖选题→撰稿→审稿→排版→配图→发布等8个子技能，单条指令即可完成从零到上架的完整图文。面向公众号编辑、自媒体等用户。
立即学习“前端免费学习笔记（深入）”；
- 异步插入 video（比如 AJAX 返回后
el.innerHTML = '...'）时，字符串里必须包含全部属性 - 用
document.createElement('video')创建再 append，也要立刻 setAttribute，且不能晚于插入 DOM 前 - React/Vue 等框架中，确保这些属性是 JSX/模板字面量的一部分，而非运行时绑定
常见样式和上下文导致 playsinline 失效
即使属性全对，微信或 Safari 仍可能强制全屏，原因往往藏在 CSS 或父容器里：
- 父级元素用了
transform: translateZ(0)、will-change: transform或perspective→ 触发非标准渲染层，iOS 直接禁用内联 - video 宽高未显式声明（哪怕
width="100%" height="200px"也比不写强）→ 微信会认为尺寸不可控，回退全屏 - video 被包在
overflow: hidden或position: fixed的容器里 → 部分微信版本判定为“布局异常”，丢弃 playsinline - 使用 m3u8 直播流时，若带
x5-video-player-type="h5-page"→ 强制全屏，应改为x5-video-player-type="h5"
autoplay 和用户手势的硬性依赖
静音 + 自动播放 ≠ 一定内联。iOS 对触发时机极其敏感：
-
muted必须写在 HTML 标签上，video.muted = true动态设置可能来不及生效 - 在
setTimeout、fetch回调、load事件里调play()→ Safari 认为非用户激活，拒绝内联 - 推荐方案：用按钮绑定
onclick="video.play()"，或监听首次touchstart后立即调play() - 微信安卓某些版本即使静音也拦截 autoplay，建议默认隐藏
controls，用自定义按钮接管播放逻辑
最易被忽略的一点：所有属性都配对了，但父容器有 transform，或者 video 没设宽高 —— 这两个问题在真机调试时经常被漏掉，却直接导致整个配置失效。
