javascript - 如何让 slider 的值实时更新？

Question

我有一个带有自定义控制栏的 HTML 视频标签，我希望其中的搜索栏和音量栏在用户浏览范围时实时更新它们的值。目前音量会在用户调整 slider 后更新，而不是在用户单击并拖动时更新。

在 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 的依赖，让我有更多的控制权，主要是作为一种学习体验。

Answer 1

1. 使用 mousemove 是一种愚蠢的解决方法。有一个名为“输入”的事件。
2. change 事件应在用户 promise 特定值(mouserelease、keyup 或 blur)后立即分派(dispatch)，但请注意 Chrome 和 IE10 对这种不同的输入/更改事件行为有错误的实现。 (参见:https://code.google.com/p/chromium/issues/detail?id=155747)
3. 如果您想学习 JS，请学习如何构建 JS 并以组件的方式思考。这比使用原生 JS 和 JQuery 重要得多。例如，您正在使用 id。这意味着您只能在一个页面上使用一个媒体播放器。您省略了 addEventListener 的第三个参数。等等....

因此解释了如何完成工作。取决于您是在标准兼容浏览器(目前只有 FF)还是在 x 浏览器环境中进行测试。

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

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

这是 FF 的工作演示:http://jsfiddle.net/trixta/MfLrW/

如果您想在 Chrome 和 IE 中使用此功能，您必须使用输入/更改并将它们视为仅输入事件。然后您需要自己计算“更改”事件，这并不简单。但这里有一个适用于您的示例:

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