Question

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

time

Answer 1

OP代码存在许多错误（根据注释）。看起来好像是jQuery，并且试图将其转换为JavaScript？如果是这样，则：

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

.on()是使用事件属性或.addEventListener()

不存在的jQuery方法。

需要引用[0]或.get(0)进行引用，以便从jQuery对象引用普通的JavaScript对象，因此不需要。

演示中评论的详细信息

// 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>

根据<input type =“ range” />更新<video>时间click

1 个答案: