我有一个带有自定义控制栏的HTML视频标签,并且在用户搜索整个范围时,我希望搜索栏和音量栏实时更新其值。目前,用户调整滑块后音量更新,而不是用户点击并拖动。
在HTML中,我将它们设置为:
< div id =video-controls> // ... < input type =rangeid =seek-barvalue =0> < input type =rangeid =volume-barmin =0max =1step =0.01value =1> // ... < / div>在我的JavaScript中,我把它们连接起来就像这样:
//通过进度条清理当前查看时间 seekBar.addEventListener('change',function(){ //计算新时间 var time = video.duration *(seekBar.value / 100); //更新视频时间 video.currentTime = time; }); //视频播放时更新搜索栏 video.addEventListener('timeupdate',function(){ //计算滑块值 var value =(100 / video.duration)* video.currentTime; //更新滑块值 seekBar.value = value; }); //拖动查找句柄时暂停视频 seekBar.addEventListener('mousedown',function(){ video.pause(); }); //当查找句柄被删除时播放视频 seekBar.addEventListener('mouseup',function(){ video.play(); } ); //通过音量栏调整视频音量 volumeBar.addEventListener('change',function(){ //更新视频音量 video .volume = volumeBar.value; });我想从零开始做这件事,但不使用jQuery等JavaScript库,尽管我知道这已经存在已经为该图书馆完成了。我见过的大多数解决方案都涉及jQuery,但我不想使用它。这是为了:减少对jQuery的依赖,允许在我的结尾进行更多的控制,主要作为学习体验。 解决方案
所以说明如何完成工作。取决于您在标准compilant浏览器(目前仅用于FF)或x浏览器环境中进行测试。
要在用户进行交互时获取输入的当前值使用它,只需使用输入事件:
range.addEventListener('input',onInput,false);以下是FF的工作演示: jsfiddle/trixta/MfLrW/
如果你想在Chrome和IE中获得这项工作,你必须使用输入/改变,并把它们当作只是输入事件。然后你需要自己计算变化事件,这并不是很简单。但这里有一个适合你的例子:
jsfiddle / trixta / AJLSV /
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. 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:
<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:
// 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. Most of the solutions I've seen involve jQuery but I don't want to use it. This is for: reducing the dependency on jQuery, allowing for more control on my end, and primarily as a learning experience.
解决方案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.
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: jsfiddle/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. Then you need to compute the "change" event yourself, which isn't really simple. But here is a working example for you:
jsfiddle/trixta/AJLSV/
更多推荐
我如何获得实时更新滑块的值?
发布评论