java - 用于 html5 音频和视频的volumeslider

Question

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

所以我来找你，希望你能帮我做这个泡菜:-)

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

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