单击按钮时更改嵌入式 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");
});

当我单击按钮时，这会导致浏览器刷新。

链接到我在想的图片：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 处理程序中。