[YouTube API] Как сделать, чтобы кнопка под видео появлялась плавно в определенное время?

Привет! Давно обещал в комментах разобраться с API YouTube плеера, и поделиться как сделать так, чтобы можно было разместить на странице (например, подписной) видео с Ютуба. И чтобы под ним кнопка или форма подписки появлялась на определенном моменте видео. И не просто по таймеру, который стартует с момента загрузки страницы, а по таймеру, который связан с видео. То есть, если видео стоит на паузе, то таймер не идет. Вот как раз решением этого вопроса я и поделюсь с вами в этой заметке.

Также эта заметка будет продолжением, моей предыдущей заметки на аналогичную тему, но касательно JW Player-а:(которая оказалась весьма популярной судя по статистике)

[JW Player скрипт] Как сделать, чтобы кнопка под видео появлялась через время? %)

Ну что, перейдем к решению.

Ниже я просто приведу вам код, который вам нужно использовать в вашей странице. И затем, примерно объясню, что он делает и где вам можно что-то изменить под себя.

Этот код встраивает ваше видео в указанное место вашей страницы динамическим образом (то есть, вы не вставляете код видео вручную <iframe src="...">). И это дает доступ к YouTube IFrame API, интерфейс, через который можно захватить управление плеером. Код отслеживает, когда плеер загрузился и при воспроизведении вешает таймер (интервал) с функцией на проверку текущего времени видео. Которая отображает вашу кнопку

<div id="player"></div>

<div id="button_wrap" style="display: none;">
	<a href="http://google.com/" id="button">ВПЕРЕД</a>
</div>

<script type="text/javascript">
var YOUR_TIME = 10; // Время видео, на котором должна появиться кнопка в секундах (если 2 минуты, то пишете 120)
var VIDEO_HEIGHT = 390; // Высота вашего видео
var VIDEO_WIDTH = 640; // Ширина вашего видео
var VIDEO_ID = 'nRlMzuhr5aI'; // ID вашего видео на YouTube, берется из ссылки на видео

var timer, player;

var tag = document.createElement('script');
var button = document.getElementById('button_wrap');

var time_current = 0;

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady()
{
	player = new YT.Player('player', {
		height: VIDEO_HEIGHT,
		width: VIDEO_WIDTH,
		videoId: VIDEO_ID,
		events: {
			'onReady': onPlayerReady,
			// 'onStateChange': onPlayerStateChange // расскомментируйте, если вам нужно автовоспроизведение
		}
	});
}

function onPlayerStateChange(event)
{
	if( event.data == YT.PlayerState.PLAYING )
	{
		timer = setInterval( checkTime, 400 );
	}
	else
	{	
		clearInterval( timer );
	}
}

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

function checkTime()
{
	time_current = player.getCurrentTime().toString();

	time_current = time_current.substring( 0, time_current.indexOf('.') );

	if( parseInt( time_current ) >= parseInt( YOUR_TIME.toString() ) )
	{
		button.style.display = 'block'; // jQuery('#button_wrap').show().animate({'opacity':1}, 500); // для анимации, если есть jQuery

		clearInterval( timer );
	}
}
</script>

В этом коде есть 4 ключевых значения, которые вам захочется изменить. Это ширина VIDEO_WIDTH и высота вашего плеера VIDEO_HEIGHT, ID уникальный код вашего видео VIDEO_ID (который можно взять из ссылки на ваше видео на YouTube) и конечно время в секундах, когда вы хотите, чтобы ваша кнопка появлялась на странице YOUR_TIME. Вы можете найти эти четыре переменные в начале кода на строчках с 8 до 11 и указать там ваши значения.

Также уточню, что код в первой строке обозначает место, куда будет вставлено ваше видео. Тег div#player будет заменен на YouTube iframe. А div#button_wrap на строках 3 и 5 это обертка, в которую на 4 строке обернута ваша кнопка.

Если у вас что-то не будет получаться, пожалуйста, пишите в комментариях ниже, и я вам попробую помочь.

Хорошего времени суток!

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

11 комментариев к “[YouTube API] Как сделать, чтобы кнопка под видео появлялась плавно в определенное время?”

  1. Ренат 19.05.2016 в 16:03 #

    Спасибо за код.
    Делаю сайт на Wysiwyg web builder.
    С настройкой видео разобрался, а с кнопкой непонятно, как настроить.
    Код вставляю в блок html.

    • Ренат 28.05.2016 в 15:17 #

      И еще как убрать елементы управления видео??
      Помогите пожалуйста.

  2. Юрий 28.05.2016 в 00:23 #

    Тоже вставляю в html и кнопка не появляется но определённой секунде.

  3. Алексей 29.06.2016 в 01:49 #

    Помогите не получается. Окно появляется но видео не работает просто рябит и пишет ошибку на экране

  4. Ольга 13.08.2016 в 16:34 #

    Здравствуйте, Богдан!

    Хочу сказать большое спасибо за ваш код! Просто замечательно, что вы добились, чтобы кнопка под плеером ютуб появлялась в нужный момент!

    Но как обычно бывает у любого пользователя - всегда найдётся вопрос:)

    На страницу я вставила ваш код, поменяла кнопку под видео на свою, выставила параметры высоты и ширины, свой ролик с ютуба. Всё получилось, следуя вашим инструкциям. Всё отлично и шикарно!

    Богдан, у меня есть такой вопрос: как убрать из видео все элементы управления?
    Раньше в теге iframe я прописывала после video id следующие параметры - rel=0&controls=0&showinfo=0;, которые и убирали все элементы.

    В вашем коде видео начинает воспроизводится автоматически - это то что нужно, но сколько я не пробовала в скрипт поставить те параметры, которые были у меня раньше - ничего не получается.
    Тыркалась-пыркалась, а результат ноль.

    Очень вас прошу помочь в решении вопроса. Если решения нет, то хоть напишите об этом, чтобы не ждать.

    С уважением к вам и вашим знаниям
    Ольга

    • Богдан 14.08.2016 в 16:24 #

      Здравствуйте, Ольга. Спасибо за вопрос.

      Попробуйте так (я добавил новый параметр playerVars с вашими значениями):

      player = new YT.Player('player', {
              height: VIDEO_HEIGHT,
              width: VIDEO_WIDTH,
              videoId: VIDEO_ID,
              playerVars: {
                  'controls': 0,
                  'rel': 0,
                  'showinfo': 0
              },
              events: {
                  'onReady': onPlayerReady,
                  // 'onStateChange': onPlayerStateChange // расскомментируйте, если вам нужно автовоспроизведение
              }
      
          });
      
      • Ольга 14.08.2016 в 21:58 #

        Богдан, не ожидала, что вы так быстро предложите решение моего вопроса.

        Теперь у меня, благодаря вам, всё получилось!

        Спасибо вам огроменное!

        С уважением, Ольга.

      • Ольга 14.08.2016 в 23:18 #

        Ещё немножко напишу:)

        Сейчас решила проверить страницу на планшете. Там ролик не проигрывается. Просто чёрный экран и прелоадер крутится и всё.

        На компьютере в любом браузере всё хорошо показывает.

        Кстати, когда пыталась сделать страницу адаптивной под мобильные, то кнопка показывалась совсем в другом месте, а не под видео.

        Поэтому оставила страницу не адаптивной:)

        Богдан, сможете помочь, чтобы на планшете ролик срабатывал?

        С уважением, Ольга.

  5. Ольга 15.08.2016 в 14:53 #

    Поэкспериментировала ещё...

    Ролик на планшете не проигрывается после добавления параметра playerVars. Как только его убираю, то на планшете ролик воспроизводится.

    Правда, надо нажимать на кнопку воспроизведения. Но это все ролики, у которых есть значение autoplay=1 так себя ведут на мобильных.

    Если поставить параметр с такими значениями

    playerVars: {
    'controls': 0,
    'rel': 0,
    'showinfo': 0,
    },

    и закомментировать обратно 'onStateChange': onPlayerStateChange, то кнопка не появляется. Хотя кнопка не появляется и без параметра playerVars, если закомментировано. Это я проверяла на компе. Сам ролик начинает воспроизводится автоматически.

    На ютубе есть инструкция https://support.google.com/youtube/answer/171780 где написано, что для автоматического воспроизведения надо вставить следующее значение autoplay=1

    У вас, насколько я поняла, чтобы кнопка появлялась в нужное время именно
    function onPlayerStateChange отвечает за это.

    Богдан, может быть, вы посмотрите код ещё раз?

    С уважением, Ольга.

  6. Евгений 20.09.2016 в 10:56 #

    У меня не работает! Само видео встает, все отлично, кстати сразу идет автовоспроизведение, чтобы от него избавится помогает толь кишь комментирование 'onReady': onPlayerReady! див блок так и остается display: none; сколько бы времени не прошло. Побывал переносить в css, не помогает

  7. Алекс 11.10.2016 в 00:34 #

    Скрипт не работает. Тоже не выводится нужный блок, хотя само видео вставляется. Похоже YT сменил свои алгоритмы и теперь не работает эта тема.
    Если есть решение, поделитесь пожалуйста