如何实时更新滑块的数值？

Question

如何实时更新滑块的数值？

9

我有一个带有自定义控制条的HTML视频标签，我希望在用户拖动范围时，即时更新进度条和音量条的值。目前，音量条只会在用户调整滑块后更新而不是用户点击和拖动时更新。

在HTML中，我将它们设置为：

<div id="video-controls">
// ...
<input type="range" id="seek-bar" value="0">
<input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1">
// ...
</div>

在我的JavaScript中，我将它们连接起来的方式如下：

// Change current viewing time when scrubbing through the progress bar
seekBar.addEventListener('change', function() {
    // Calculate the new time
    var time = video.duration * (seekBar.value / 100);

    // Update the video time
    video.currentTime = time;
});

// Update the seek bar as the video plays
video.addEventListener('timeupdate', function() {
    // Calculate the slider value
    var value = (100 / video.duration) * video.currentTime;

    // Update the slider value
    seekBar.value = value;
});

// Pause the video when the seek handle is being dragged
seekBar.addEventListener('mousedown', function() {
    video.pause();
});

// Play the video when the seek handle is dropped
seekBar.addEventListener('mouseup', function() {
    video.play();
});

// Adjust video volume when scrubbing through the volume bar
volumeBar.addEventListener('change', function() {
    // Update the video volume
    video.volume = volumeBar.value;
});

我希望从头开始做这件事，而不使用像jQuery这样的JavaScript库，尽管我知道已经有人为那个库完成了这个任务。大多数解决方案都涉及到jQuery，但我不想使用它。这是为了：减少对jQuery的依赖，允许更多的控制权，以及主要作为学习经验。

- Ushinro

1

你试过 mousemove 吗？ - SparoHawk

你能用jsfiddle构建一个简单的示例吗？并不是说你的问题不清楚，只是有一个可工作的演示会更好。 - Josh Durham

@SparoHawk 谢谢，你的解决方案对于声音起作用了。但是在尝试推进视频时，这个解决方案对于滑块条并不适用，因为当我将鼠标悬停在其上时视频会暂停。我尝试在拖动时删除播放/暂停功能，但这并没有起作用。 - Ushinro

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alexander farkas · Accepted Answer

使用mousemove并不被鼓励，这会使解决方案变得更加复杂。最好使用“input”事件。
更改事件应该在用户已经确定了特定值（mouserelease、keyup或blur）后立即触发，但请注意Chrome和IE10对此有不同的input/change事件行为的实现较差。（参见：https://code.google.com/p/chromium/issues/detail?id=155747）
如果你想学习JS，请学习如何组织你的JS并以组件思维方式思考。这比使用本地JS vs. JQuery更重要。例如，你正在使用id，这意味着你在一个页面上只能有一个mediaplayer。你遗漏了addEventListener的第三个参数等等....

因此，如何完成任务取决于你是在标准兼容的浏览器（目前仅限Firefox）中进行测试还是在跨浏览器环境中进行测试。

要在用户与输入交互时获取输入的当前值，只需使用input事件：

range.addEventListener('input', onInput, false);

这里有一个适用于火狐浏览器的演示实例：http://jsfiddle.net/trixta/MfLrW/

如果您想在谷歌浏览器和IE中使用此功能，则需要将input/change事件视为仅为输入事件。然后，您需要自己计算“change”事件，这并不是很简单。但是，这里有一个可行的示例供您参考：

http://jsfiddle.net/trixta/AJLSV/