用于 html5 音频和视频的volumeslider

Posted 2023-02-25

【中文标题】用于 html5 音频和视频的volumeslider

【英文标题】：volumeslider for both html5 audio and video

【发布时间】：2014-01-22 17:45:24

【问题描述】：

现在我已经在互联网上广泛搜索了一个脚本或帮助创建一个同时控制 html5 视频和音频的滑块。但可惜我没有发现这样的事情。

所以我来找你是希望你能帮我解决这个泡菜:-)

项目： 我正在尝试创建一个同时提供视频和音频的网站，但它们是隐藏的。它应该留在背景中，因此需要有一个音量滑块，以便您可以根据自己的喜好调整声音。

<div class="hidden">    
<audio id="audio1" autoplay="autoplay" controls="controls" loop><source src="jazz.mp3" /></audio>
<video id="video1"   autoplay="autoplay" loop> <source src="fireplace.mp4" type="video/mp4"></video>
<audio id="audio2" autoplay="autoplay" controls="controls" loop><source src="rain.mp3" /></audio> 
</div>

一开始就尝试创建一个脚本，在页面加载时关闭音乐，但没有成功

<script language="javascript">
var a = document.getElementById('audio1','audio2','video1');
a.volume = 0.1;
</script>

【参考方案1】：

document.getElementById 只接受一个 id 作为参数。有关其他选项，请参阅此答案GetElementByID - Multiple IDs

如果你这样写，你的代码应该可以运行：

var a1 = document.getElementById('audio1');
var a2 = document.getElementById('audio2');
var v1 = document.getElementById('video1');
a1.volume = a2.volume = v1.volume = 0.8;