change volume of video using range input using jquery

Question

I'm trying to convert my JS code to JQuery because all my other code is in JQuery and for consistency, but I'm having trouble with the range inputs being updated upon changing value.

I have the following html:

<video width="400" height="225" id="video-1">
            //sources...
            <p>
                Sorry, your browser does not support HTML5 video.
            </p>
        </video>
        <div id="video-controls">
            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
        </div>

and am trying to change the volume like so:

$('#volume').change(function() {
                    $('#video-1')[0].volume = $('#volume').attr("value");
                });

I've tried using the prop() method in JQuery on the video element, but that doesn't work either

$('#volume').change(function() {
                    $('#video-1')[0].prop("volume") = $('#volume').attr("value");
                });

in JS I used a change event, so I believe thats the right event to use:

volumeControl.addEventListener("change", function(e) {
       video.volume = volumeControl.value; 
    });

adeneo · Accepted Answer · 2013-12-31 12:46:22Z

4

$('#volume').on('change', function() {
    $('#video-1').prop("volume", this.value);
});

FIDDLE

answered Dec 31, 2013 at 12:46

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

a7omiton Over a year ago

I was so close to that! before i was doing $('#video-1').prop("volume", this.attr("value")); But this works, thank you so much

Sahal Zaman Over a year ago

@ a7omiton please explain your answer,because I try the different ways but Its not working

Matt617 · Accepted Answer · 2013-12-31 12:47:04Z

1

Use the video element's volume property.

for example:

$("#video-1").volume = 0.5;

or to make your form control it:

$('#volume').on('change', function() {
    $('#video-1').volume= this.value;
});

Per w3c: The element's effective media volume is volume, interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range need not be linear. The loudest setting may be lower than the system's loudest possible setting; for example the user could have set a maximum volume.

answered Dec 31, 2013 at 12:47

Matt617

4582 silver badges14 bronze badges

Collectives™ on Stack Overflow

change volume of video using range input using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related