javascript - YouTube视频导航小部件

Closed. This question needs debugging details。它当前不接受答案。












想改善这个问题吗？更新问题，以便将其作为on-topic用于堆栈溢出。

5年前关闭。



Improve this 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

希望您理解我要完成的工作。

最佳答案

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