change volume of video using range input using jquery

问题

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

回答1:

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

FIDDLE

回答2:

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.

来源：https://stackoverflow.com/questions/20857579/change-volume-of-video-using-range-input-using-jquery

标签

jquery

html5-video

range