Как сделать play frame YouTube?

Question

[Алексей]

Добрый день. Подскажите пожалуйста, я добавляю видео с помощью скрипта при клике на кнопку подгружается frame YouTube c autoplay, на мобильном телефоне понятно autoplay блочится. Как мне запустить frame на телефоне при клике на фальш кнопку youtube, потому что сейчас получается фальш плеер (картинка) + кнопка, а потом ещё youtube подгружает свою заставку и кнопку ? Заранее спасибо !

Answer 1

[Евгений]

Используй YouTube Javascript API для инициализации плеера.
Это несколько строк.

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

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

var player = new YT.Player(id, {
    videoId: videoId,
    playerVars: {
        playsinline: 1,
        loop: 1,
        playlist: videoId
    },
    events: events,
});
player.playVideo();

Отдельно отмечу, что на мобилке будет все воспроизводиться без проблем. И на iOS, и на Android.

Comments

[Алексей]

Добрый день, не пойму где у меня ошибка ?

$(document).ready(function () {
  function loadPlayer() {
    if (typeof YT == 'undefined' || typeof YT.Player == 'undefined') {
      var tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      window.onYouTubePlayerAPIReady = function () {
        onYouTubePlayer();
      };
    }
  }

  var player;
  function onYouTubePlayer() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'gNQpsgDmaME',
      events: {
        onReady: onPlayerReady,
      },
    });
  }

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

  $('.video__button').click(function () {
    loadPlayer();
  });
});

[Евгений]

Алексей, в консоль что-то вываливается, или код просто не работает без скриптовых ошибок?

[Алексей]

Евгений, ошибок нет, на телефоне не работает.

[Евгений]

Алексей, тел – ios/android? Какой браузер?
И можешь закинуть в jsfiddle полный код?

[Алексей]

Евгений, да конечно. https://jsfiddle.net/brutto33/pw52xdzf/3/

[Евгений]

Алексей, на десктопе отрабатывает не скрипт, а просто вставка iframe с отметкой autoplay=1.
Скрипт обращается к какому-то id, которого нет в структуре:

[Алексей]

Евгений, странно у меня все работает, перекинул в jsfiddle и почему не подгружает frame сразу с autoplay. По поводу скирна я брал с каких примеров кто работал с API yutobe, ещё не понял что должно быть.

[Евгений]

Алексей, предлагаю тебе взять минимальный рабочий код, и уже допиливать его под свою задачу:

https://jsfiddle.net/3L98g6uz/

[Алексей]

Евгений, спасибо большое за советы, буду пробывать. У меня только вопрос как запустить видео по клику на мою кнопку ?

[Евгений]

Алексей, в официальной документации чуть больше параметров в примере: https://developers.google.com/youtube/iframe_api_r...

[Евгений]

Алексей,

как запустить видео по клику на мою кнопку

убери событие onReady у плеера, и вызывай player.playVideo() по клику на нужную кнопку.

[Евгений]

Алексей, что-то вроде такого:

<div id="ytplayer"></div>

<button onclick="startPlayer()">Начать воспроизведение</button>

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

	var player;
	function onYouTubePlayerAPIReady() {
		player = new YT.Player('ytplayer', {
			width: '400px',
			height: '225px',
			videoId: 'RGyhtUtGgxM',
			playerVars: {
				playsinline: 1,
				loop: 1,
			},
		});
	}

	function startPlayer() {
		player.playVideo();
	}
</script>