Измените время во встроенном видео 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 для управления видео; используйте методы API Javascript. Проверьте seekTo здесь: https://developers.google.com/youtube/iframe_api_reference#Playback_controls

Как правило, после загрузки iframe API JS будет вызывать onYouTubeIframeAPIReady(), где вы создаете объект игрока YouTube. Затем вы можете использовать ссылку этого игрока для управления видео, например player.seekTo().

Вы все еще можете использовать ваш IFRAME, как описано в Боттона из this section:

Как уже упоминалось в разделе Начало работы, вместо того, чтобы писать пустой элемент на странице, который JavaScript в API проигрывателя в затем код заменит элемент, вы можете сами создать тег .

...

Если вы напишете тег, то при создании объекта YT.Player, вам не нужно указать значения для ширины и высоты, которые указаны в качестве атрибутов тега, или параметры videoId и игрока, которые указаны в URL-адресе src.

Кусок, отсутствующий в вашем коде, является объектом 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); 
    } 
} 

Вы можете поместить этот код в отдельном скрипте, но убедитесь, что он находится в корневом объеме (например, в вашей голове тега) вместо того, чтобы положить его в обработчик OnLoad ,