HTML video标签的playsinline="true"？移动端浏览器内联播放实战

playsinline="true"在iOS上无效，因HTML5规范将其定义为布尔属性，仅存在即启用；正确写法为playsinline或playsinline=""，且须配合muted、autoplay、loop、controls="false"及X5私有属性才能实现内联播放。 是错的写法，直接导致属性失效。iOS Safari 和微信 WebView 只认布尔属性 （无值）或 ，加等号和字符串值会被忽略。 为什么 在 iOS 上完全不生效 HTML5 规范中 是布尔属性（boolean attribute），它的存在即表示“启用”，不存在即“禁用”。 浏览器 解析时只检测该属性是否出现在标签中，不读取其值。写成 后，Safari 会把它当做一个带值的自定义属性处理，从而跳过内联播放逻辑判断。 常见错误现象： 视频点击后仍强制全屏，控制台无报错，但行为与没加该属性一致 Vue/React 中用 或 动态绑定，结果渲染出错的 HTML 属性 正确写法只有两种： 立即学习 “ 前端免费学习笔记（深入） ”； 只加 远远不够：必须共存的 4 个关键属性 单独写 在 iOS Safari 上几乎等于没写——它只是“申请许可”，真正能否内联播放，取决于是否同时满足以下条件： Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 ：iOS 强制要求自动播放必须静音；有声视频首次播放必须由用户手势触发，否则 被静默拒绝 ：若需页面加载即播，必须显式声明；微信部分版本会拦截无交互的 ，建议配合 事件再调 ：iOS 16+ 对非循环视频更倾向 fallback 全屏；加 能显著提升稳定性，尤其对短背景视频 ：不能只靠 CSS 隐藏；必须显式声明并配合 ，否则某些机型点击区域仍会触发全屏 漏掉任意一个，都可能导致“看似写了 ，但点开还是全屏”。 微信和 X5 内核浏览器必须补的私有属性 微信 iOS 客户端、QQ 浏览器、夸克等基于 X5 内核的环境，根本不认标准 ，只响应自家属性： ：最关键的一条，漏掉基本必全屏 ：防横屏劫持，避免用户旋转手机时被强制切全屏 ：X5 内核专属布尔属性，建议保留（注意：这里才允许写 ） ：iOS Safari 旧版本兼容必需，iOS 10+ 已支持标准属性，但 12~14 设备仍有 fallback 风险 完整最小可用示例： JS 动态设置 后容易忽略的三件事 在 Vue/React 中通过 ref 拿到 元素后动态赋值 ，是高频失败场景： 没调 ：iOS 不会重新解析新 的媒体元数据， 等属性不被二次识别 在 / 里直接 ：iOS 拦截无用户手势的播放请求，返回 （但常被静默吞掉） CSS 干扰未排查：父容器含 、 或 但宽高比失配，Safari 会判定“布局异常”而强制全屏 真正可靠的触发方式是监听 或 ，并在用户 click/touchend 后调用 —— 即使你已设 和 ，这点在微信中尤其关键。