Приостановка API YouTube iFrame в JavaScript
У меня есть видео Youtube, встроенное в слайд-шоу, которое я хотел бы сделать паузой, когда пользователь нажимает на миниатюру img
:
<li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li>
Я был над Youtube API, но я смущен, как начать все.
Загружается ли API JS автоматически, когда я добавляю ?enablejsapi
в конец YouTube video id
?
Вот мой JS:
var player1 = document.getElementById('my-video');
$('img').click(function () {
player1.pauseVideo();
})
EDIT:
Вот что я сделал, основываясь на Мэтте ниже, для кого-то, кто задавался вопросом:
<li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li>
<li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li>
А потом мой JS:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Create YouTube player(s) after the API code downloads.
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player-1');
player2 = new YT.Player('player-2');
}
Тогда в document.ready
:
$(document).ready(function () {
$(".slideshow-1 img").click(function () {
player1.stopVideo();
});
$(".slideshow-2 img").click(function () {
player2.stopVideo();
});
}
Ответы
Ответ 1
Добавление ?enablejsapi
в строку встраивания не включает автоматически код API. Он регистрирует только конкретное вложение с API.
Вы хотите прочитать первый пример здесь: https://developers.google.com/youtube/iframe_api_reference
- Асинхронный фрагмент кода загружает и выполняет YT iframe API
-
onYouTubeIframeAPIReady()
запускается, когда API готов.
- Создайте новый объект
YT.Player
- Теперь ваш код может вызывать
pauseVideo()
в вашем игровом объекте
Скорее всего, вы захотите отключить любые события на вашем img до тех пор, пока onYouTubeIframeAPIReady()
не будет запущен.
Ответ 2
Если вы хотите сохранить JS во внешнем файле, используйте:
HTML
<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
JS
var yt_int, yt_players={},
initYT = function() {
$(".ytplayer").each(function() {
yt_players[this.id] = new YT.Player(this.id);
});
};
$.getScript("//www.youtube.com/player_api", function() {
yt_int = setInterval(function(){
if(typeof YT === "object"){
initYT();
clearInterval(yt_int);
}
},500);
});
Управление видео
yt_players['player_id'].playVideo();
Причина, по которой я делаю это, заключается в том, что у меня загружаются видео динамически через CMS, и они открываются в оверлее. Я установил функции закрывания/открывания для воспроизведения/паузы видео.
Ответ 3
Список всех пользовательских элементов управления в Youtube API iframe.
Просмотр в Github
- Play
- Пауза
- Стоп
- Звук выключен
- Звук включен
- Restart