单击按钮时更改嵌入youtube视频中的时间

Question

我想嵌入一个youtube视频并提供按钮，当你点击它们时，这些按钮会转到视频中的特定时间并从那里继续播放。我尝试过使用jquery并更改"src"属性，如下所示：

原始来源：

<iframe src="http://www.youtube.com/embed/PjDw3azfZWI?&t=5m30s&rel=0&amp">

JS:

$("#link1").click(function() {
    $("#video").attr("src", "http://www.youtube.com/embed/PjDw3azfZWI?&t=10m30s&rel=0&amp");
});

这导致浏览器在我单击按钮时刷新。

链接到我的想法：https://i.stack.imgur.com/PH0If.png.单击按钮应使视频跳转到指定的时间。

Answer 1

您不应该重新加载iframe来控制视频；使用Javascript API方法。查看查看此处：https://developers.google.com/youtube/iframe_api_reference#Playback_controls

基本上，一旦你的iframe加载，JS API将调用YouTubeIframeAPIReady（），在那里你构建一个YouTube播放器对象。然后，您可以使用播放器引用来控制视频，例如player.seekTo（）.

您仍然可以使用您的iframe，如本节底部所述：

如"入门"部分所述页面上的空元素，播放器API的JavaScript然后代码将替换为一个元素，您可以创建给自己贴标签。

如果您确实编写了标记，那么在构造YT.Player对象时，不需要指定宽度和高度的值，这些值被指定为标记的属性，也不需要指定videoId和播放器参数，这些参数在srcURL中指定。

您的代码缺少YT.Player对象，您必须在上面提到的回调方法中构造它。这提供了对播放器控件的访问。

这是一个Fiddle演示：

var player, seconds = 0;
function onYouTubeIframeAPIReady() {
    console.log("player");
    player = new YT.Player('player', {
        events: {
          'onReady': onPlayerReady
        }
      });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function seek(sec){
    if(player){
        seconds += sec;
        player.seekTo(seconds, true);
    }
}

您可以将这些代码放在一个单独的脚本中，但要确保它在根范围内（就像在head标记中一样），而不是放在onLoad处理程序中。