Youtube 视频导航小部件

Question

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

我正在考虑对视频使用扩展程序 url。如果您在 &t=1m22s och 加载视频，它会从 1 分 22 秒开始加载。有没有办法使用 iframe 和 javascript 来完成这项工作？

示例link： https://www.youtube.com/watch?v=KKp9g8fTBDQ

带有时间 link 扩展的示例（Phone 启动）： 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

Youtube 视频导航小部件

Youtube video navigation widget

html

javascript

youtube

iframe

hyperlink