Question

我想嵌入一个YouTube视频并提供按钮，当您点击这些按钮时，它们将转到视频中的特定时间并从那里继续播放。我尝试过使用jquery并更改＆＃34; src＆＃34;属性，如：

原始来源：

<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");
});

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

链接到我所想的图像：http://i.imgur.com/sCFZSIn.png。单击按钮可使视频跳转到指定的时间。

Answer 1

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

基本上，一旦你的iframe加载，JS API就会调用onYouTubeIframeAPIReady（），你可以在其中构建一个YouTube播放器对象。然后您可以使用该播放器参考来控制视频，例如player.seekTo（）。

您仍然可以使用iframe，如this section：

的按钮所述

如“入门”部分所述，而不是编写   您网页上的空元素，即播放器API的JavaScript   然后代码将替换为元素，您可以创建    标记自己。

...

如果你确实编写了标签，那么当你构造YT.Player对象时，你不需要指定宽度和高度的值，它们被指定为标签的属性，或者是videoId和player参数，是在src URL中指定的。

您的代码缺失的部分是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处理程序中。

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

1 个答案: