javascript - Youtube iframe api 未触发 onYouTubeIframeAPIReady

Question

我已经与 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 没有打印任何内容，也没有任何反应。

在手机上，这种情况经常发生。有什么想法吗？

Answer 1

这不是超时问题，您不需要手动触发此功能。

确保您的 onYouTubeIframeAPIReady 函数在全局级别可用，而不是嵌套(隐藏)在另一个函数中。