41

私はかなり長い間、YouTube iframe APIと戦ってきました。どういうわけか、メソッド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ず、何も起こらない場合があることです。

携帯電話では、これは常に発生します。何か案は？

4

9 に答える 9

73

これはタイムアウトの問題ではないため、この関数を手動で起動する必要はありません。

onYouTubeIframeAPIReady関数がグローバル レベルで使用可能であり、別の関数内にネスト (隠蔽) されていないことを確認してください。

于 2013-03-13T01:05:57.620 に答える
7

これを再検討した後、webpack（または他のcommongJSモジュールシステムを想定）を使用している場合、または独自のJSファイルの前にYouTube APIの準備ができていることがわかった場合は、間隔を使用することでした-YouTubeがいくつかを提供するまでpromise コールバックの形式:

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

        clearInterval(checkYT);
    }
}, 100);

私の場合、これが最もエラー防止のようでした。

于 2016-03-16T22:52:50.033 に答える
3

ページをローカルにロードするだけでなく、実際に Web 上で提供することによってページをテストしていることを確認してください。YouTube iFrame API の動作に一貫性がない/非決定的である

于 2013-11-01T17:52:33.643 に答える
0

同様の問題がありました。私の場合、onYouTubeIframeAPIReady が非常に速く呼び出されたため、実際の実装は適切な呼び出しの準備ができていませんでした。したがって、youtube player_api 呼び出しの後に、onYouTubeIframeAPIReady を検証するための var を持つ単純な実装を次のように追加しました。

<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>
于 2015-12-21T16:02:51.300 に答える
-7

私は、ページのロード時に単純なsetTimeoutを使用して、ほとんどすべての状況でこれを機能させることができました。理想的ではありませんが、ほとんどの場合、問題を解決するのは別のチェックです。

setTimeout(function(){
    if (typeof(player) == 'undefined'){
        onYouTubeIframeAPIReady();
    }
}, 3000)
于 2013-02-07T04:01:46.483 に答える