Youtube iframe api Nie wyzwalanie onYouTubeIframeAPIReady

Walczyłem z youtube iframe api od dłuższego czasu. Jakoś Metoda onYouTubeIframeAPIReady nie zawsze jest uruchamiana.

Z objawów wynika, że problem z ładowaniem. W Inspektorze nie są wyświetlane żadne błędy.

Oto Mój kod:

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

(wywołane na końcu strony. Próbowałem umieścić kod zaraz po powyższym skrypcie i wynik był taki sam.)

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);
  } 
}
Problem w tym, że czasami nic zostaje wydrukowany przez console.log i nic się nie dzieje. W telefonach komórkowych to się dzieje cały czas. Jakieś pomysły?
Author: Liam, 2012-09-04
Source

9 answers

Nie jest to problem z limitem czasu i nie należy uruchamiać tej funkcji ręcznie.

Upewnij się, że twoja funkcja onYouTubeIframeAPIReady jest dostępna na poziomie globalnym, a nie zagnieżdżona (ukryta) w innej funkcji.

 72
Author: bcm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-26 08:22:46

Możesz zawsze dołączyć go do obiektu window, aby upewnić się, że jest wywołany globalnie. Jest to pomocne, jeśli kod jest używany przez firmę amd.

window.onYouTubeIframeAPIReady = function() {}
 53
Author: Erick R Soto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-22 20:50:47

Jeśli trzeba umieścić wewnątrz funkcji, jednym z możliwych rozwiązań jest zamiast: 

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

Możesz to zadeklarować w następujący sposób: 

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

W tym przypadku upewnij się, że wstawiasz określony skrypt do dom po deklaracji (wywołanie insertBefore(), co jest teraz w Twoim przypadku w zasięgu globalnym):

 13
Author: Pengő Dzsó,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-01 13:46:30

Jeśli wczytasz kod API IFrame Player asynchronicznie w następujący sposób: 

<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>

A także wczytujesz kod skryptu tak: 

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

Wtedy funkcja onYouTubeIframeAPIReady nie zostanie wywołana ze względu na to, że ten sam kod jest ładowany dwa razy(funkcja jest wywoływana tylko raz, gdy API jest całkowicie załadowane).

Więc użyj tylko jednego ze sposobów zgodnie z Twoimi potrzebami.

 9
Author: Joar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-26 08:23:31

Po ponownym zbadaniu tego, znalazłem dla mnie działające rozwiązanie podczas korzystania z webpack (lub zakładam inny system modułów commongJS), lub jeśli okaże się, że api youtube jest gotowy przed własnym plikiem JS, było użycie interwału-dopóki youtube nie dostarczy jakiejś formy obietnicy callback: 

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

        clearInterval(checkYT);
    }
}, 100);
To wydawało się być najbardziej odporne na błędy w moim przypadku.
 7
Author: Joao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-16 22:52:50

Upewnij się, że testujesz stronę, mając ją faktycznie serwowaną w Internecie, a nie tylko ładowaną lokalnie. zachowanie interfejsu YouTube iFrame API jest niespójne / nieeterministyczne

 3
Author: Ben Wheeler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:14

Zrobiłem to, aby leniwie załadować odtwarzacz youtube. Wygląda na kuloodporną.

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);

}
 1
Author: Matt Loye,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-26 14:18:52

Miałem podobny problem, w moim przypadku onYouTubeIframeAPIReady był wywoływany tak szybko, że rzeczywista implementacja nie była gotowa na właściwe wywołanie. Tak więc po wywołaniu youtube player_api dodałem prostą implementację z var do weryfikacji onYouTubeIframeAPIReady tak po prostu: 

<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>
 0
Author: Diogo Garcia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-21 16:02:51

Udało mi się to zrobić w prawie wszystkich okolicznościach z prostym setTimeout na załadowanie strony. Wiem, że nie jest to idealne rozwiązanie, ale to po prostu kolejna kontrola, która rozwiązuje problem przez większość czasu.

setTimeout(function(){
    if (typeof(player) == 'undefined'){
        onYouTubeIframeAPIReady();
    }
}, 3000)
 -7
Author: nosforz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-07 04:01:46