用于html5音频和视频的volumelider

Question

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

所以我来找你，希望你能帮我解决这个问题： - ）

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

<div class="hidden">    
<audio id="audio1" autoplay="autoplay" controls="controls" loop><source src="jazz.mp3" /></audio>
<video id="video1" width="1" height="1" 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>

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