YouTube Iframe API - видео иногда не воспроизводится с помощью пользовательских элементов управления, а обновляется

Question

Немного странно - я впервые работаю с API iFrame YouTube, создавая скин для сайта для клиентов.

Я следовал примерам кода, предоставленным Google / YouTube (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API).

Проблема заключается в том, что при нажатии кнопки воспроизведения, которая вызывает player.playVideo (), при некоторых обстоятельствах он будет воспроизводиться, но в основном он просто обновляет видео без ошибок, зарегистрированных в консоли. Видео станет черным, как если бы оно было готово к воспроизведению, но вместо этого оно вернется к видеопостеру с кнопкой воспроизведения.

Вы можете просмотреть весь код здесь - https://codepen.io/james-morton/pen/BEZGvm

Я пробовал разные вещи, например, вместо использования:

function onYouTubePlayerAPIReady() {

.. Я пробовал это как другие примеры безрезультатно

window.onYouTubePlayerAPIReady = function() {

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

Есть идеи?

Edit:

После дальнейшей отладки используйте следующее:

function onPlayerStateChange(event){
  console.log('State Change: ' + event.data);
}

Я вижу, что когда он не загружается, состояние игрока изменилось с -1 (Unstarted) на 3 (Buffering), а затем обратно на -1 (Unstarted) при нажатии кнопки воспроизведения.

Answer 1

Оказывается, проблема, похоже, связана с CodePen - перенеся весь код в мою собственную среду, он работает без проблем, без проблем с воспроизведением через элементы управления.

Рассмотрев https://css -tricks.com / play-button-youtube-and-vimeo-api / , которые используют очень похожую настройку, проблема была легко воспроизведена на CodePen, и комментарии (все путь назад из 2014) опишите проблемы, с которыми я столкнулся.

Надеюсь, это будет полезно другим, кто это заметит.

Answer 2

Это странно! Я не совсем «решил» это, но у меня есть некоторые отзывы. При запуске вашего кода сначала я не мог заставить его воспроизводиться вообще (ни средней кнопкой «YT», ни пользовательской кнопкой воспроизведения), но когда я использовал вашу кнопку «ff» (когда он не еще начал играть), были явные признаки того, что он был активирован. Я изменил z-index в yt-player с 2 на -2, а затем смог использовать среднюю кнопку, чтобы начать игру. После начального воспроизведения у меня не было проблем с использованием пользовательских кнопок (пауза / воспроизведение работали нормально) - и я обновлял и пробовал несколько раз, каждый раз с успехом.

Одна большая проблема - запуск первого воспроизведения видео с помощью пользовательской кнопки воспроизведения. Вы могли бы, возможно, автоматически запустить его (возможно, с задержкой?), Чтобы обойти необходимость использования средней кнопки? Я проверил ширину кнопок (чтобы увидеть, может ли отступы / перекрытия) влияют на кнопку воспроизведения, но ничего не нашел. Я заметил, что когда я проигрывал видео, оно слегка поднималось с начальной позиции, поэтому я немного подправил css (только очень незначительная подстройка). Вот моя ссылка на кодовый указатель (она ничем не отличается от вашей ..) Надеюсь, это поможет ... хотя бы немного.