Как правильно загрузить видео посредством API YouTube?

Добрый день. Столкнулся с комплексом проблем, сопровождающих API YouTube. Прежде всего - задача в том, чтобы по клику на некий сторонний button подключить этот самый API и запустить видео. Т.е. API нельзя напрямую подключть при загрузке страницы. Все делал в соответствии с документацией.
Делаю следующее:

$(document).on('click', "#playVideo", function() {
                // Ссылка на ролик зашита в атрибут data-link кнопки
		videoLink = $(this).attr("data-link").split("v=")[1] || $(this).attr("data-link").split("embed/")[1];
		// Вызываем функцию, подключающую API
		getYouTubeAPI(onYouTubeIframeAPIReady);
});


Вот сама функция, подключающая API:

function getYouTubeAPI(callback) {
	var doc = document,
		script = doc.createElement('script'),
		lastScript = $("script")[$("script").length - 1];

	script.src = 'https://www.youtube.com/iframe_api';
	lastScript.before(script);
        // В конце вызываем функцию, которая создает объект плеера и запускает видео
	callback();
}


Функция, создающая объект плеера и запускающая видео:

var videoLink,
      player;

function onYouTubeIframeAPIReady() {
	player = new YT.Player('videoInner', {
			videoId: videoLink,
			playerVars: {
				'autoplay': 1
			},
			events: {
				'onReady': onPlayerReady
			}
	});
		}

function onPlayerReady(event) {
	event.target.playVideo();
}


Суть проблемы в консоли: Uncaught ReferenceError: YT is not defined, т.е. в функции onYouTubeIframeAPIReady - YT при создании плеера не определен, что означает, что предыдущая функция не успела отработать. Точнее, функция-то отработала, но API не успел полностью загрузиться, и коллбэк его не видит (это как мне представляется). Проверяется отложенным вызовом onYouTubeIframeAPIReady, т.е. через setTimeout - нормально срабатывает. Но setTimeout не хочется использовать, что-то подсказывает, что это не самое правильное решение.

Другая беда, что даже если срабатывает (по setTimeout) - то срабатывает только на PC. А на Андроиде, к примеру - не срабатывает, т.е. не загружается и не включается никакое видео.
И завершает сей стек проблем вот эта история в Хроме. Не знаю, возможно это как-то влияет на то, что в Андроиде не загружается, но, в любом случае, черт с ним, позже разберусь. Пока интересует, как все-таки вызвать функию onYouTubeIframeAPIReady только тогда, когда сработала предыдущая и API полностью загрузился?
  • Вопрос задан
  • 499 просмотров
Пригласить эксперта
Ответы на вопрос 1
@po5epT
Надо повесить обработчик на событие onload у загрузки API YouTube
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы