HTML视频如何控制音量大小_volume属性在JS中设置音量范围-html教程-PHP中文网

HTML视频如何控制音量大小_volume属性在JS中设置音量范围

雪夜

发布： 2025-10-04 23:46:03

原创

243人浏览过

答案是通过JavaScript的volume属性可控制HTML5视频音量，取值范围0.0至1.0，支持动态设置与实时调整，结合按钮或滑块实现用户交互，但需注意浏览器兼容性、静音策略及系统音量影响。

html视频如何控制音量大小_volume属性在js中设置音量范围

在HTML5中，可以通过JavaScript控制<video>元素的音量大小。音量控制的核心是volume属性，它允许你设置或获取音频的播放音量。

volume属性的基本用法

volume 属性的取值范围是 0.0 到 1.0，其中：

0.0 表示静音（无声）
1.0 表示最大音量
例如，0.5 表示音量为50%

你可以通过JavaScript动态设置这个值。

示例代码：

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

模力视频

模力视频 - AIGC视频制作平台 | AI剪辑 | 云剪辑 | 海量模板

查看详情

<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>

登录后复制