muted 是必须直接写在 video 标签上的布尔属性,存在即生效,不可通过 js 后设;ios 需额外加 playsinline;volume=0 无效,取消静音须在用户手势中紧接执行 muted=false。

muted 是必须写的 HTML 属性,不是可选开关——没它,autoplay 在绝大多数环境里根本不会触发播放。
video 标签里必须直接写 muted,不能靠 JS 后设
浏览器检查的是元素初始状态,不是运行时值。DOM 加载时没这个属性,后续用 video.muted = true 补上,大概率失败。
-
正确写法:
<video autoplay muted src="a.mp4"></video> -
错误写法:
<video autoplay></video>+video.muted = true在DOMContentLoaded里执行 -
muted是布尔属性,存在即生效,别写muted="true"或muted="muted"(XHTML 风格) - Vue/React 中也要确保
muted是初始 prop 或 attribute,不是挂载后通过 state 更新
iOS 上必须加 playsinline,否则 muted 白搭
iOS Safari 默认强制全屏播放,且会忽略静音状态;不加 playsinline,muted 就形同虚设。
- HTML 中写:
<video autoplay muted playsinline></video> - JS 中对应属性是
video.playsInline = true(注意大小写) - 旧版微信(7.0.5 以前)可能还要加
x5-video-player-type="h5-page",现在基本不用了
别用 volume = 0 替代 muted
volume = 0 不等于静音,也不被浏览器自动播放策略认可——它只是调低音量,iOS Safari 甚至直接禁用 volume 设置(始终返回 1)。
-
video.muted = true是唯一被广泛豁免的“通行证”,告诉浏览器“我接受静音” -
video.muted = true会覆盖volume值;设muted = false后,volume才重新生效 - 即使你后续立刻
muted = false,也得先靠muted = true把play()跑通
取消静音必须在用户交互事件里执行
想让用户点一下就恢复声音?不能随便调 video.muted = false,必须满足两个硬性条件:
- 只能在
click、touchstart、keydown等真实用户手势回调中执行 -
video.muted = false和video.play()必须紧挨着写,并.catch()捕获失败(比如手势缺失) - 别用
removeAttribute("muted")——它只删 DOM 属性,不影响运行时状态;必须赋值:video.muted = false
最常被忽略的一点:muted 的核心价值不在静不静音,而在让视频获得播放资格——哪怕你后续立刻取消静音,也得先靠它把 play() 跑通。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











