Question

我试图将我的JS代码转换为JQuery，因为我的所有其他代码都在JQuery中并且为了保持一致性，但是我在更改值时更新了范围输入时遇到了问题。

我有以下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>

我正试图像这样改变音量：

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

我已尝试在视频元素上使用JQuery中的prop()方法，但这不起作用

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

在JS中我使用了一个更改事件，所以我相信这是正确的事件：

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

Answer 1

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

FIDDLE

Answer 2

使用视频元素的音量属性。

例如：

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

或让你的表单控制它：

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

每个w3c：元素的有效媒体音量是音量，相对于0.0到1.0的范围进行解释，其中0.0表示静音，1.0表示最响亮的设置，声音之间的响度增加。范围不必是线性的。最响亮的设置可能低于系统最大的设置;例如，用户可以设置最大音量。

使用jquery使用范围输入更改视频量

2 个答案: