HTML5视频音量必须用JavaScript设置volume属性（0.0–1.0），且需等待canplay等事件；muted属性更关键，自动播放依赖muted=true，取消静音须在用户手势回调中同时设muted=false和volume=1。
HTML5 的 <video> 标签本身没有直接的 HTML 属性（比如 volume="0.5"）来设置初始音量，音量必须通过 JavaScript 控制，且受浏览器策略限制 —— 用户未与页面交互前，多数浏览器会静音自动播放的视频。
video 元素的 volume 属性只能用 JS 读写
volume 是 <video> 元素的 DOM 属性，取值范围是 0.0（静音）到 1.0（最大音量），只接受数字，不支持字符串或百分比。
- 设置前需确保元素已加载（如监听
loadeddata或canplay事件），否则可能无效 - 设为
0等价于静音，但muted属性更可靠（尤其对自动播放） - 部分浏览器（如 Safari iOS）不允许脚本在无用户手势时解除静音，即使设置了
volume = 1
为什么 muted 比 volume 更关键
自动播放策略下，muted 是能否播放的前提。只要 muted 为 true，大多数浏览器允许自动播放；一旦取消静音，必须由用户主动点击/触摸触发，否则 volume 设置会被忽略或重置。
-
muted可以用 HTML 属性：<video muted>，也可用 JS：video.muted = true -
muted和volume独立生效：即使muted = true，volume仍可读写，但实际无声音输出 - 用户手动点开音量控件后，
muted通常被设为false，此时volume才真正起作用
常见错误：直接写 volume="0.7" 在 HTML 中
这种写法完全无效 —— volume 不是标准 HTML 属性，浏览器会忽略它，也不会映射到 DOM 属性。
立即学习“前端免费学习笔记（深入）”；
<!-- ❌ 错误：volume 不是合法 HTML 属性 -->
<video src="demo.mp4" volume="0.7" autoplay></video>
<p><!-- ✅ 正确：用 JS 设置 -->
<video id="myVideo" src="demo.mp4" muted autoplay></video>
<script>
const v = document.getElementById('myVideo');
v.addEventListener('canplay', () => {
v.volume = 0.7;
});
</script>兼容性与静音恢复的实操要点
用户首次交互后想“取消静音”，不能只设 volume = 1，必须同时清除 muted，且该操作需包裹在用户事件回调中（如 click、touchstart）。
- Safari（macOS/iOS）和 Chrome Android 对“用户手势”要求最严：必须是直接触发的事件，不能是定时器或异步回调里调用
- Firefox 允许在
click后立即调用play()+ 修改volume，但 iOS WebKit 仍可能拒绝 - 测试时务必在真机或模拟真实用户行为（如按钮点击），而非仅靠 DevTools 控制台执行
音量逻辑不是纯数值设置问题，而是跟播放状态、用户权限、浏览器策略绑在一起的 —— 忘掉“设个属性就完事”的想法，重点放在 muted 控制流和用户交互时机上。
