Question

我正在使用该元素作为视频搜索栏，并使用下面的jQuery来更新拇指的位置＆＃39;在播放期间。但是，此代码会导致元素忽略它的初始设置值＆＃34; 0＆＃34;，而是将拇指放在＆＃39;轨道的中心位置。

我可以更新此代码以确保初始值得到尊重吗？

由于

HTML

<input type="range" id="seek-bar" value="0" step="0.05">

的jQuery

var video = document.getElementById('video');

video.addEventListener("timeupdate", function() {
  // Calculate the slider value
  var value = (100 / video.duration) * video.currentTime;

  // Update the slider value
  seekBar.value = value;
});

Answer 1

我会在视频中添加一个oncanplay侦听器，另外如果视频没有暂停，则只更新范围输入。另外，我将min和max属性添加到范围输入中，以确保它从0到100。

＆＃13;

var video = document.getElementById('video');
var seekBar = document.getElementById("seekBar");

video.addEventListener("canplay", function() {
  video.addEventListener("timeupdate", function() {

    if (!video.paused) {
      // Calculate the slider value
      var value = (100 / video.duration) * video.currentTime;

      // Update the slider value
      seekBar.value = value;
    }
  });
})

＆＃13;

<video id="video" style="width:600px;max-width:100%;" controls="">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  
<input id="seekBar" type="range" min="0" max="100" value="0" />

＆＃13;

HTML <range>初始值是jQuery

1 个答案: