小编Ush*_*nro的帖子

如何实时更新滑块的值?

我有一个带有自定义控制栏的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>
Run Code Online (Sandbox Code Playgroud)

在我的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) …
Run Code Online (Sandbox Code Playgroud)

html javascript html5 volume slider

6
推荐指数
1
解决办法
1万
查看次数

标签 统计

html ×1

html5 ×1

javascript ×1

slider ×1

volume ×1