使用jquery使用范围输入更改视频量 [英] change volume of video using range input using jquery

问题描述

我正在尝试将我的JS代码转换为JQuery，因为我的所有其他代码都在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.

我有以下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");
                });

我尝试过使用 prop（）视频元素中的JQuery方法，但不起作用

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

推荐答案

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

FIDDLE

这篇关于使用jquery使用范围输入更改视频量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！