答案是通过javascript的volume属性可控制html5视频音量，取值范围0.0至1.0，支持动态设置与实时调整，结合按钮或滑块实现用户交互，但需注意浏览器兼容性、静音策略及系统音量影响。
在HTML5中，可以通过JavaScript控制<video></video>元素的音量大小。音量控制的核心是volume属性，它允许你设置或获取音频的播放音量。
volume属性的基本用法
volume 属性的取值范围是 0.0 到 1.0，其中：
- 0.0 表示静音（无声）
- 1.0 表示最大音量
- 例如，0.5 表示音量为50%
你可以通过JavaScript动态设置这个值。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<video id="myVideo" src="example.mp4"></video>
<button onclick="setVolume(0.2)">20%音量</button>
<button onclick="setVolume(0.5)">50%音量</button>
<button onclick="setVolume(1.0)">100%音量</button>
<script>
function setVolume(val) {
var video = document.getElementById('myVideo');
video.volume = val;
}
</script>
实时获取和调整音量
你也可以监听音量变化或在用户操作后读取当前音量。
例如：
var video = document.getElementById('myVideo');
console.log("当前音量：" + video.volume); // 默认通常是1
如果你想让用户通过滑块控制音量，可以使用<input type="range">：
<input type="range" min="0" max="1" step="0.1" oninput="adjustVolume(this.value)">
<script>
function adjustVolume(val) {
var video = document.getElementById('myVideo');
video.volume = parseFloat(val);
}
</script>
注意事项
- 如果视频本身没有声音轨道，设置volume无效
- 浏览器可能受系统音量或静音策略影响，无法强制播放声音
- 部分浏览器在用户未与页面交互前会阻止自动播放或调节音量
- 不要将volume设为负数或大于1，虽然某些浏览器支持超过1.0（如Chrome允许最高至5.0），但不推荐，兼容性差
