单击按钮时更改嵌入式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,如本节的内容所述:

正如"入门"部分所述,您可以自己创建标记,而不是在页面上写入空元素,然后播放器API的JavaScript代码将替换为元素.

...

如果你写的代码,那么当你构建YT.Player对象,你并不需要为宽度和高度,被指定为标签的属性,或者视频ID和播放器参数,这些参数指定指定值在src URL中.

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

这是一个小提琴演示:

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处理程序中.