如何实时更新滑块的值？

Question

我有一个带有自定义控制栏的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的依赖,允许对我的更多控制,主要是作为学习体验.

Answer 1

1. 使用mousemove是一个愚蠢的解决方法.有一个叫做"输入"的事件.
2. 一旦用户将自己转换为特定值(mouserelease,keyup或blur),就应该调度change事件,但要注意Chrome和IE10对这种不同的输入/更改事件行为有不良实现.(参见:https://code.google.com/p/chromium/issues/detail？id = 155747)
3. 如果你想学习JS,学习如何构建你的JS并思考组件.这比使用原生JS与JQuery重要得多.例如,您正在使用ID.这意味着您只能在一个页面上拥有一个媒体播放器.您省略了addEventListener的第三个参数.等等....

所以说明如何完成工作.取决于您是在标准编译浏览器(目前只有FF)还是在x-browser环境中进行测试.

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

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

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

如果你想在Chrome和IE中使用它,你必须使用输入/更改并将它们视为只是输入事件.然后你需要自己计算"变化"事件,这并不是很简单.但这是一个适合您的工作示例:

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