0

Now I have searched the internet far and wide for a script or help to create a slider that controls both HTML5 video and audio at the same time. But alas I found no such thing.

So I come to you in hope you will help me with this pickle :-)

Project: I am trying to create a website that provides both video and audio at the same time, but they are hidden. It's suppost to stay in the background, so there need to be a volume slider so you can adjust the sounds for your own liking.

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

Tried to at the start to create a script that turned the music down at page load, but didn't work

<script language="javascript">
var a = document.getElementById('audio1','audio2','video1');
a.volume = 0.1;
</script>
Münter
  • 179
  • 1
  • 2
  • 8

1 Answers1

0

document.getElementById accepts only one id as parameter. See this answer for other options GetElementByID - Multiple IDs

Your code should run if you write it like this: 

var a1 = document.getElementById('audio1');
var a2 = document.getElementById('audio2');
var v1 = document.getElementById('video1');
a1.volume = a2.volume = v1.volume = 0.8;
Community
  • 1
  • 1
Tino
  • 106
  • 6