javascript - YouTube 视频导航小部件

Question

嗨，我正在尝试创建一个小部件，用户可以在其中使用按钮导航 YouTube 视频。例如，如果是赛车视频，则会有 5 个按钮，每个按钮都标记为第 1 圈、第 2 圈等。

我正在考虑在视频网址上​​使用扩展名。如果您在 &t=1m22s 处加载一个视频，它会从 1 分 22 秒开始加载。有没有办法使用 iframe 和 javascript 来完成这项工作？

示例链接: https://www.youtube.com/watch?v=KKp9g8fTBDQ

时间链接扩展示例(电话启动): https://www.youtube.com/watch?v=KKp9g8fTBDQ&t=3m52s

我希望你明白我想要实现的目标。

Answer 1

const src = $("#video")[0].src;
$(document).ready(function() {
  $('#lap1').on('click', function(ev) {
    $("#video")[0].src = src + "&start=60";
    ev.preventDefault();
  });
  $('#lap2').on('click', function(ev) {
    $("#video")[0].src = src + "&start=200";
    ev.preventDefault();
  });
  $('#lap3').on('click', function(ev) {
    $("#video")[0].src = src + "&start=300";
    ev.preventDefault();
  });
});

body {
  padding: 30px;
}
.button {
  font: bold 20px Arial;
  background-color: #FF8000;
  color: #333333;
  padding: 2px 6px 2px 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a id="lap1" class="button" href="#">Lap 1</a>
<a id="lap2" class="button" href="#">Lap 2</a>
<a id="lap3" class="button" href="#">Lap 3</a>
</br>
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/J4LI_EqnJq8?autoplay=1" frameborder="0" allowfullscreen></iframe>

Run the Code