YouTube iframe api не запускается на YouTubeIframeAPIReady

Я уже давно борюсь с API-интерфейсом iframe для YouTube. Каким-то образом метод onYouTubeIframeAPIReady не всегда срабатывает.

Из симптомов кажется проблема с загрузкой. В инспекторе ошибок нет.

Вот мой код:

HTML

<div id="player"></div>
          <script>
            videoId = 'someVideoId';
            var tag = document.createElement('script');
            tag.src = "//www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
          </script>

JS

(вызывается в конце страницы. Я попытался разместить код сразу после приведенного выше сценария, и результат был таким же.)

var isReady = false
  , player
  , poster
  , video;

$(function () {
$('.js-play').click(function (e) {
    e.preventDefault();
    interval = setInterval(videoLoaded, 100);
  });
});
function onYouTubeIframeAPIReady() {
  console.log(videoId)
  player = new YT.Player('player', {
    height: '445',
    width: '810',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady//,
      //'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  isReady = true;
  console.log("youtube says play")
}

function videoLoaded (){
  if (isReady) {
      console.log("ready and play")
      poster.hide();
      video.show();

      $('body').trigger('fluidvideos');

      player.playVideo();
      clearInterval(interval);
  } 
}

Проблема в том, что иногда ничего не печатается console.log и ничего не происходит

На мобильных телефонах это происходит постоянно. Есть идеи?

Источник

9 ответов

Решение

Это не проблема тайм-аута, и вам не нужно запускать эту функцию вручную.

Убедитесь, что ваш onYouTubeIframeAPIReady функция доступна на глобальном уровне, не вложена (скрыта) в другую функцию.

Источник

Вы всегда можете добавить его к объекту окна, чтобы убедиться, что он вызывается глобально. Это полезно, если ваш код использует amd.

window.onYouTubeIframeAPIReady = function() {}
Источник

Если вам нужно вставить внутрь функции, одно из возможных решений вместо:

function onYouTubeIframeAPIReady() {
  // func body...
}

Вы можете объявить это так:

window.onYouTubeIframeAPIReady = function() {
  // func body...
}

В этом случае убедитесь, что вы вставили определенный сценарий в DOM после объявления (insertBefore() назовите то, что сейчас находится в глобальной области видимости в вашем случае):

Источник

Если вы загружаете код API IFrame Player асинхронно следующим образом:

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

и вы также загружаете код скрипта следующим образом:

<script src="http://www.youtube.com/player_api"></script>

тогда функция onYouTubeIframeAPIReady не вызывается из-за того, что один и тот же код загружается дважды (функция вызывается только один раз, когда API полностью загружен).

Так что используйте только один из способов в соответствии с вашими потребностями.

Источник

После повторного изучения я нашел рабочее решение для меня при использовании веб-пакета (или, как я полагаю, любой другой модульной системы commongJS), или если вы обнаружите, что API youtube готов до того, как ваш собственный файл JS должен был использовать интервал - пока youtube не предоставит некоторые Форма обещания обратного вызова:

var checkYT = setInterval(function () {
    if(YT.loaded){
        //...setup video here using YT.Player()

        clearInterval(checkYT);
    }
}, 100);

Это казалось самым надежным в моем случае.

Источник

Убедитесь, что вы тестируете страницу, предоставляя ее в Интернете, а не просто загружая ее локально. Поведение API YouTube iFrame противоречиво / недетерминировано

Источник

Я на самом деле сделал это, чтобы лениво загрузить плеер YouTube. Кажется пуленепробиваемым для меня.

window.videoApiLoaded = [];
window.videoApiLoaded.youtube = false;

function loadYoutubeVideo(videoId) {

    window.onYouTubeIframeAPIReady = function() { document.dispatchEvent(new CustomEvent('onYouTubeIframeAPIReady', {})) };

    if(window.videoApiLoaded.youtube == false) {
        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.videoApiLoaded.youtube = true;
    }

    var player;

    document.addEventListener('onYouTubeIframeAPIReady', function (e) {
        player = new YT.Player('player', {
          height: '400',
          width: '600',
          videoId: videoId,
          events: {
            'onStateChange': onYtStateChange
          }
        });

    }, false);

}
Источник

У меня была похожая проблема. В моем случае onYouTubeIframeAPIReady вызывался так быстро, что фактическая реализация не была готова к правильному вызову. Поэтому после вызова youtube player_api я добавил простую реализацию с var для проверки onYouTubeIframeAPIReady, вот так:

<script src="http://www.youtube.com/player_api"></script>
<script>
var playerReady = false
window.onYouTubeIframeAPIReady = function() { //simple implementation
    playerReady = true;
}
</script>
</header>
.
.
.
<body>
<script>
window.onYouTubeIframeAPIReady = function() { //real and fully implemented
    var player; // ... and so on ...
}
if(playerReady) { onYouTubeIframeAPIReady(); console.log("force to call again") }
</script>
Источник

Я смог сделать это практически при любых обстоятельствах с помощью простого setTimeout при загрузке страницы. Не знаю, я знаю, но это просто еще одна проверка, которая решает проблему большую часть времени.

setTimeout(function(){
    if (typeof(player) == 'undefined'){
        onYouTubeIframeAPIReady();
    }
}, 3000)
Источник
Другие вопросы по тегам