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

使用mousemove是一种愚蠢的解决方法。有一个名为'input'的事件。
一旦用户将自己提交给特定值（mouserelease，keyup或blur），就应该调度change事件，但要注意Chrome和IE10对这种不同的输入/更改事件行为有不良实现。（见：https://code.google.com/p/chromium/issues/detail?id=155747）
如果您想学习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/

如何实时更新滑块的值？

1 个答案: