Проблемы с Youtube Iframe Api для начала воспроизведения видео на Chrome

Question

У меня есть следующие начальные настройки:

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
      }
   });
}

Затем в обработчике onPlayerReady я добавил прослушиватель событий для кнопки, находящейся вне iframe:

function onPlayerReady(event) {
   button.addEventListener('click', () => event.target.playVideo());
}

В onPlayerStateChange I 'Я просто регистрирую происходящее:

function onPlayerStateChange(event) {
    console.log(event.data);
}

После нажатия этой кнопки в Chrome (v.72.0.3626.119) в консоли есть 3 записи: -1 (UNSTARTED), 3 (BUFFERING), -1 (UNSTARTED).Когда я снова пытаюсь нажать кнопку, ничего не происходит.Это прекрасно работает в Firefox, т.е. IE выдает в консоли: -1 (UNSTARTED), 3 (BUFFERING),1 (PLAYING) и просто начинает воспроизводиться видео.

У вас есть идеи, как решить эту проблему?

Answer 1

Вы должны добавить в функцию onPlayerReady эту строку:

event.target.playVideo();

Как показано в документации :

Пример:

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

Не могу точно сказать, почему, но в Google Chrome для автоматического воспроизведения видео необходимо установить значение 1 для параметра mute, в противном случае автоматическое воспроизведение видео не будет работать.

Пример:

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '<YOUR_VIDEO_ID>',
    playerVars: {
      'autoplay': 1,
      'loop': 1,
      'mute': 1 // N.B. here the mute settings.
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

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