HTML中video静音播放方法 HTML中video标签playsinline属性设置

iOS Safari和安卓WebView中视频自动播放必须同时设置autoplay、muted和playsinline三属性，缺一不可；仅autoplay或仅muted均会失败，且muted需布尔值、playsinline仅iOS有效。

video静音播放必须加muted属性

不加 muted，iOS Safari 和大多数安卓 WebView 会直接拒绝自动播放，哪怕设置了 autoplay。这不是兼容性问题，是浏览器强制策略——有声音的媒体不允许静默触发。

常见错误现象：autoplay 不生效、视频黑屏卡在第一帧、控制台报错 The request is not allowed by the user agent or the platform in the current context。

• muted 必须是布尔属性（写成 muted="" 或 muted="muted" 都行，但推荐简洁写法 muted）
• 仅加 autoplay 不够；仅加 playsinline 也不够；三者通常要一起用：autoplay muted playsinline
• 如果后续想取消静音，需先通过用户手势（如点击）调用 video.muted = false，否则 iOS 会拒绝

playsinline 在 iOS 上必须显式声明

iOS Safari 默认全屏播放 <video>，playsinline 是绕过该行为的唯一标准方式。不加它，视频一播放就跳转全屏，且无法通过 JS 拦截或阻止。

注意：这个属性只对 iOS 有效，安卓和桌面端基本忽略它（但加上无害）。

立即学习“前端免费学习笔记（深入）”；

• 必须写成 playsinline（不是 webkit-playsinline，后者是旧版私有属性，已废弃）
• 不能靠 CSS 或 JS 模拟内联效果；没有替代方案
• 搭配 webkit-allow-fullscreen="false" 可进一步禁用全屏按钮，但非必需

自动播放策略下，muted + playsinline 缺一不可

在微信内置浏览器、QQ 浏览器、iOS Safari 等主流移动端环境中，自动播放成立的前提是同时满足：autoplay、muted、playsinline。少一个，行为就不可控。

典型错误配置：
<video autoplay playsinline> → 无 muted，iOS 直接静音锁定且不播放
<video autoplay muted> → 无 playsinline，iOS 强制全屏

• HTML 中建议统一写成：<video autoplay muted playsinline src="xxx.mp4">
• 如果用 JS 动态设置，记得顺序无关，但属性值必须全部存在：video.autoplay = true; video.muted = true; video.playsInline = true;（注意 JS 中是 playsInline，驼峰写法）
• 某些低版本微信（如 7.0.5 以下）可能还需加 x5-video-player-type="h5-page"，但现代环境已不需要

video.play() 调用失败的常见原因

即使写了 muted 和 playsinline，JS 主动调用 video.play() 仍可能抛出 Promise rejected 错误，尤其在页面未完全就绪或用户未交互时。

错误信息通常是：DOMException: The element has no supported sources（资源未加载完）或 The request is not allowed...（权限被拒）。

• 确保 src 已设置且可访问；推荐用 canplay 或 loadedmetadata 事件后再调用 play()
• 避免在 DOMContentLoaded 立即调用；更稳妥的是监听用户首次点击后触发
• 捕获异常：video.play().catch(e => console.warn("play failed:", e))，不要假设它一定成功
• Android Chrome 85+ 对 play() 的调用时机更敏感，需确保 video 元素已插入 DOM 且尺寸不为 0

video 自动播放不是“加几个属性就完事”，而是策略、时机、平台限制三者咬合的结果。最容易被忽略的是：muted 属性不可移除后再恢复音频，除非有明确用户手势；而 playsinline 在桌面端无效这点，常让人误以为它没起作用。