Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Vlad Legkowski
Vlad Legkowski
9,882 Points

Setting volume for video element

Hi T3H, can anybody explain to the person who only used JS once for 5 minuts, how to set up a video volume to a certain %/level.

<div class="fullscreen-bg">
<video id="bgAudio" loop autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video mute-on-resize" volume="10%">
    <source src="vid/Marbella%20Triathlon%20Start-HD.mp4" type="video/mp4">
</video>

</div>

Hope i made it clear. Open to Solely html css solutions of course

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points 
<video id="bgAudio" loop autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video mute-on-resize">
    <source src="vid/Marbella%20Triathlon%20Start-HD.mp4" type="video/mp4">
</video>

<script>
    var vid = document.getElementById("bgAudio");
    vid.volume = 0.2;
</script>

The above script selects your video element via its ID bgAudio and saves it to the variable "vid". From there you can call vid.volume to change the volume DOM value of your video. 0.2 from the example will equal 20%.

Hope this helps :)

Vlad Legkowski
Vlad Legkowski
9,882 Points

Works magic