[英]How do I get the value of a slider to update in real-time?
I have an HTML video tag with a customized control bar and in it I want both the seek bar and volume bar to update their values in real-time as the user scrubs through the range. 我有一个带有自定义控制栏的HTML视频标签,在其中我希望搜索栏和音量栏能够在用户擦除范围时实时更新其值。 Currently the volume updates after the user adjusts the slider and not while the user is clicking-and-dragging.
目前,用户调整滑块后更新音量,而不是在用户单击并拖动时更新。
In HTML I have them set up as such: 在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>
And in my JavaScript I have them hooked up like so: 在我的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;
});
I want to do this from scratch and not use JavaScript libraries like jQuery even though I know this has already been done for that library. 我想从头开始这样做,不要使用像jQuery这样的JavaScript库,即使我知道已经为该库完成了。 Most of the solutions I've seen involve jQuery but I don't want to use it.
我见过的大多数解决方案都涉及jQuery,但我不想使用它。 This is for: reducing the dependency on jQuery, allowing for more control on my end, and primarily as a learning experience.
这是为了:减少对jQuery的依赖,允许对我的更多控制,主要是作为学习体验。
So the explanation how to get things done. 所以说明如何完成工作。 Depends wether you are testing in a standards compilant browser (currently only FF) or in x-browser enviroment.
取决于您是在标准编译浏览器(目前只有FF)还是在x-browser环境中进行测试。
To get the current value of an input while the user is interacting with it, simply use the input event: 要在用户与其交互时获取输入的当前值,只需使用输入事件:
range.addEventListener('input', onInput, false);
Here is a working demo for FF: http://jsfiddle.net/trixta/MfLrW/ 这是FF的工作演示: http : //jsfiddle.net/trixta/MfLrW/
In case you want to get this work in Chrome and IE, you have to use the input/change and treat them like it would be only the input event. 如果你想在Chrome和IE中使用它,你必须使用输入/更改并将它们视为只是输入事件。 Then you need to compute the "change" event yourself, which isn't really simple.
然后你需要自己计算“变化”事件,这并不是很简单。 But here is a working example for you:
但这是一个适合您的工作示例:
http://jsfiddle.net/trixta/AJLSV/ http://jsfiddle.net/trixta/AJLSV/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.