我有一个带有自定义控制栏的 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 的依赖,让我有更多的控制权,主要是作为一种学习体验。
- 不鼓励使用 mousemove,这会使解决方案变得复杂。最好使用“输入”事件。
- 一旦用户提交了特定值(mouserelease、keyup 或blur),就应该调度更改事件,但要注意 Chrome 和 IE10 对这种不同的输入/更改事件行为的实现很糟糕。 (看:https://code.google.com/p/chromium/issues/detail?id=155747 https://code.google.com/p/chromium/issues/detail?id=155747)
- 如果你想学习 JS,请学习如何构建 JS 并以组件的方式思考。这比使用原生 JS 和 JQuery 重要得多。例如,您正在使用 ids。这意味着一页上只能有一个媒体播放器。您省略了 addEventListener 的第三个参数。等等....
所以解释如何完成事情。取决于您是否在符合标准的浏览器中进行测试(目前仅适用于 x 浏览器环境。
要在用户与其交互时获取输入的当前值,只需使用输入事件:
range.addEventListener('input', onInput, false);
这是 FF 的工作演示:http://jsfiddle.net/trixta/MfLrW/ http://jsfiddle.net/trixta/MfLrW/
如果您想在 Chrome 和 IE 中实现此功能,则必须使用输入/更改并将它们视为仅输入事件。然后你需要自己计算“改变”事件,这并不简单。但这是一个适合您的工作示例:
http://jsfiddle.net/trixta/AJLSV/ http://jsfiddle.net/trixta/AJLSV/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)