通过jquery更改视频音量

Question

我想使用jQuery更改视频的音量。到目前为止，它不起作用。trigger('play')起作用。这是因为元素没有id而引起的问题吗？

jQuery('.v1 .wpb_single_image').click(function() {
jQuery(this).addClass(".v1 open-video"); //add the class to the clicked element
jQuery(".v1 video").trigger('play');
jQuery(".v1 video").volume = 1.0;
});

如果有人能帮我的话。

Answer 1

volume是video元素的属性，而不是jQuery对象的属性。因此，您需要使用prop()方法：

$(".v1 video").prop('volume', 1.0);

或者，您可以直接访问视频元素：

$(".v1 video").get(0).volume = 1.0;

Answer 2

以下是使用jQuery 更改视频音量的完整功能

//! with jQuery update video volume
$(function () {
// getting the video and custom input slider using jQuery
const video = $("#my_video");
const volumeslider = $("#volumeslider");
// logging in the console to verify if the elements exists
console.log("jquery video element", video);
console.log("volumeslider element", volumeslider);

$(document).on("input change", "#volumeslider", function () {
// getting the volume on slide
const volume = $(this).val();
console.log("volume value", volume);
$("#my_video").prop("volume", Number(volume) / 100);
});
});

这是视频和输入滑块的html

<video width="320" height="240" autoplay loop id="my_video">
<source src="https://matchplicity.com/wp- 
content/uploads/2023/05/matchplicity-online-video- 
cutter.com_.mp4"
type="video/mp4">
<source src="https://matchplicity.com/wp-content/uploads/2023/05/matchplicity-online-video-cutter.com_.mp4"
type="video/ogg">
Your browser does not support the video tag.
</video>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">