Question

使用YouTube的可嵌入视频并创建外部进度条。

我遇到的第一个问题是我只能向后搜索（例如，当我点击已经发生的进度条的一部分时，搜索栏调整的唯一时间。我认为这与哪个{ {1}}我正在使用。）

其次，当我点击查找时间时，视频会自行重置......如果它收到的值是“null或0”。

相关HTML

<button id="select_resume_btn" class="btn btn-default" type="file" 
        ngf-select="uploadFiles($file, $invalidFiles)" 
        ngf-pattern="'.docx,.pdf'" 
        accept=".docx,.pdf" 
        ngf-max-size="5MB">Select Resume</button>

相关的JS / JQuery（但是如果你需要看到别的东西，请告诉我）

div

编辑：这是现场网站！ https://www.uncvrd.co/

Answer 1

您所要做的就是重新安排html元素，以便onclick事件发生在那里。目前onclick位于移动div（正在转换的div）上。让我们假设这是新安排

<section id="progress-bar-container">
    <div class="container-fluid">
        <div class="seek-bar"></div>
        <div class="progress-bar-bottom" id="progress-bar-bottom"></div>
        <div class="progress-background"></div>
    </div>
</section>

event.target.value尝试获取div的值（但div没有价值）。你想要使用的是event.pageX，这样你就可以获得x坐标，然后找到相对于搜索条div的位置部分。

javascript部分将是这样的

jQuery(".seek-bar").on("mouseup touchend", function (event) {
    // Calculate new time for the video
    // duration * ( value of range input / 100 )
    var newTime = player.getDuration() * (event.pageX / $('.seek-bar').width());
      console.log(newTime);

    // Skip video to new time.
    player.seekTo(newTime);
  });

单击时自定义视频进度条重置

1 个答案: