根据 <input type="range"> 点击更新 <video> 时间答案

【问题标题】：Updating <video> time based on <input type="range"> click根据 <input type="range"> 点击更新 <video> 时间
【发布时间】：2019-05-07 15:41:17
【问题描述】：

我正在使用以下代码尝试根据用户单击seekBar 的位置在指定时间更新HTML5 video 的currentTime 属性。但是，我所拥有的只是添加当前视频时间，而不是 seekBar 点击选择的时间。我在time 变量中的计算是否错误？任何帮助将不胜感激。

<video id="video" src="videourl.com" preload></video>
<input id="seek-bar" type="range" min="0" max="100" value="0" step="0.05">


// Vars 
var video = document.getElementById('video');
var seekBar = document.getElementById('seek-bar');

// Create clickable seek bar and update video position
seekBar.on('input change', function() {

    // Calculate the new time
    var time = video[0].duration * (seekBar.value / 100);

    // Update the video time
    video[0].currentTime = time;
});

【问题讨论】：

我在你的 sn-p 中没有看到 id="video"
另外getElementById() 不返回数组。所以video[0] 无效。
seekBar 不是 jQuery 对象，所以应该是 $(seekBar).on(...)
计算看起来不错。其余的，没有。它实际上应该引发一些错误。只需在诸如jsbin.com 之类的操场上对其进行测试，然后打开控制台。也许它会帮助您了解究竟是什么问题..
@moshfeu 谢谢，你能帮忙解开吗？这有点超出我的知识范围。

标签： jquery html video

【解决方案1】：

OP 代码有很多错误（根据 cmets）。它看起来好像是 jQuery 并且试图将其转换为 JavaScript？如果是的话：

....on('input change',...

.on() 是一个不存在的 jQuery 方法，使用 on-event 属性或.addEventListener()

使用 [0] 或 .get(0) 取消引用是从 jQuery 对象引用纯 JavaScript 对象的必要条件，因此不需要。

demo中评论的详细信息

// Reference the <form>
const uix = document.forms.uix;
// Register the <form> to input event
uix.oninput = userInterface;

/*
--Callback pases the Event Object
- Reference the <video>
- Reference the clicked, inputed, changed, etc element
- Collect all <form> controls (<input><output><fieldset>)

- If the <input> matches by it's id #seek...
- Calculate the relative values of the #seek and #vid
- #vid Pause() Set currentTime to the value of #seek
- update output#view to value of #seek
*/
function userInterface(e) {
  const vid = document.getElementById('vid');
  const tgt = e.target;
  const view = this.elements.view;

  if (tgt.matches('#seek')) {
    const time = vid.duration * (tgt.valueAsNumber * 0.01);
    vid.pause();
    vid.currentTime = time;
    vid.play();
    view.value = tgt.value;
  }
  return false;
}

     :root {
      font: 700 5vh/1 Consolas
    }
    
    fieldset {
      width: fit-content;
      margin: 2vh auto;
      padding: 1px
    }
    
    video {
      display: block;
      width: 50vw;
      height: auto;
      ,
      margin-bottom: 0
    }
    
    input,
    output {
      font: inherit;
      display: inline-block;
      height: 10vh;
      line-height: 10vh;
      vertical-align: middle;
    }
    
    output {
      width: 25%
    }
    
    input {
      width: 60%;
      margin: 0 0 -25px 25px;
    }

<!DOCTYPE html>
<html>

<head>
  <style>
,1--CSS goes here-->
  </style>
</head>

<body>

  <form id='uix'>
    <fieldset>

      <video id='vid' src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4" preload></video>

      <input id="seek" type="range" min="0" max="100" value="0" step="0.05">
      <output id='view' for='seek'></output>

    </fieldset>
  </form>
  <script>
    <!-- JavaScript goes here-->
  </script>
</body>

</html>

【讨论】：