Question

我将HTML范围输入设置为HTML5视频播放器的搜索栏，如下所示：

<input type="range" id="seek-bar" value="0" min="0" max="1" step="0.001">

我的意图是范围的值在0到1之间，以便滑块的值（例如0.5）乘以视频的长度（5000，对于例如），当用户滑动手柄时，将输出视频中的适当位置（例如，0.5 * 5000 = 2500）。

但相反，这个范围输入值正在输出更大的值，我无法解释。（例如20,000）。

处理输入的代码段：

var $video = $("#fullscreen");
var video = $video.get(0);

// Pause the video when the slider handle is being dragged
seekBar.on("mousedown", function() {
    video.pause();
});

// Play the video when the slider handle is dropped
seekBar.on("mouseup", function() {
    // Calculate the new time
    var time = video.duration * seekBar.value;
    console.log("Video duration: " + video.duration);
    console.log("Seekbar value: " + seekBar.value);
    console.log("Seeked time: " + time);
    console.log("Seek Max:" + document.getElementById("seek-bar").max);
    video.currentTime(time);
    video.play();
});

预期产出：

Video duration: 5871.146667
Seekbar value: 0.5
Seeked time: 2935
Seek Max:1

实际输出：

Video duration: 5871.146667
Seekbar value: 3.9127773334503213 
Seeked time: 22972.4896
Seek Max:1

为什么此HTML范围栏的值高于1，而其最大值设置为1？

Answer 1

没有小提琴就很难说。什么是seekBar？你调用seekBar.on()所以我认为它是一个jQuery对象。但是你正在使用seekBar.value，这对jQuery对象毫无意义。

如果它实际上是一个jQuery对象，就像这样创建：

var seekBar = $('input#seek-bar');

然后您应该可以使用seekBar.val()来获取值。

另外，您使用

document.getElementById("seek-bar").max

可以更好地写为seekBar [0] .max，因为你已经遇到了遍历DOM以找到你的搜索栏的麻烦。

为什么此HTML范围栏的值大于1而其最大值设置为1？

1 个答案: