javascript - YouTube API - Firefox/IE 为任何 "X is not a function"请求返回错误 'player.'

Question

我一直在竭尽全力试图让一个相当简单的 YouTube api 集成在 FF/IE 中工作，但到目前为止还没有成功。

这听起来像是范围问题或播放器初始化之前进行的调用，但我尝试过的一切都表明它不是这两件事之一。还要注意的是，一切都在(仅)Chrome 中完美运行。

// Async api load per YT documentation...
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Declare player and set basic functions...
var player

playVideo = function() { player.playVideo(); }
stopVideo = function() { player.stopVideo(); }

// YT Api ready function...
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: "TkJcg4bmAYs",
    events: {
      'onStateChange': onPlayerStateChange
    }
  });

  // After player object created, bind popup function to page anchors...
  var popup = $('#video-popup')
  ,   popupFrame = $(popup).children('.center')
  ;

  $('a[data-vid]').click(function(e){
    e.preventDefault ? e.preventDefault() : e.returnValue = false;

    var clicked = $(e.target).closest('a')
    ,   videoID = $(clicked).attr('data-vid')
    ;

    if (!$(popup).hasClass('working')){
      // If popup isn't already working, cue video and animate popup in... 
      player.cueVideoById({videoId:videoID});

      $(popup).addClass('working');
      $(popup).css('display','block').animate({
        opacity: '1'
      }, 200, function(){
        playVideo();
        $(popup).removeClass('working');
      });
    }
  });
}

使用 api 和弹出代码链接到测试页面，在 Chrome 中工作，但在其他浏览器中不工作。 http://www.crackin.com/dev/regions/pathBuild/

Answer 1

在将一半的键盘键嵌入额头后，我终于偶然发现了问题的根源，这简单得令人沮丧……这只不过是一个可见性问题!啊啊啊!!!显然，如果播放器对象在设置为 display:none; 时被初始化，FireFox 和 IE 将无法访问它，但 Chrome 足够聪明，仍然可以初始化并定位它，甚至隐藏它。

在我的特定情况下，解决方法是将弹出窗口加载为显示:不透明度为 0 的 block ，然后初始化 api，然后在 YT api 初始化函数中将弹出窗口设置为显示:无。像这样:

首先，CSS...

#video-popup { display: block; opacity: 0; }

.. 然后是 javascript...

var player
,   popup = $('#video-popup')
;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: "TkJcg4bmAYs"
    });
    $(popup).css('display','none');
}

现在我得去喝醉了。

---

额外的东西:在最终找出问题的根源之后，我能够隔离一些额外的 IE 浏览器问题并制定解决方案。这些只是为了以防万一其他人遇到类似的问题，他们也许可以从中找到自己的解决方案。我的解决方案可能会因情况而异，但如果其他人将 youtube 视频放入弹出窗口并需要 IE 支持，这可能会有所帮助。

上面的修复(在 YT 就绪函数中设置 display:none)对于 IE8 似乎并不完美，但通过将其包装在一个短暂的超时中很快就修复了:

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: "TkJcg4bmAYs"
    });
    setTimeout(function(){
        $(popup).css('display','none');
    }, 500);
}

IE7 有点棘手，因为似乎如果使用 display:none 隐藏播放器，无论是否已初始化，它都会立即变得不可用。

使用条件注释将类应用于标记，您可以添加一些 IE 特定的 css 以保持弹出窗口“可见”，但将其隐藏在屏幕外。

#video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; opacity: 0; }
.ie7Detect #video-popup { display: block; left: -101% }
#video-popup.open { left:0 !important; }

还有一个问题，即在 IE7 和 8 中，youtube 播放器仍然可见，即使父容器设置为不透明度 0(在页面仍在加载时发生)。我尝试添加规则以进一步定位弹出窗口的内容并设置它们的不透明度，但没有用，也不是很干净。我决定使用加载类。

所以弹出窗口有一个加载类:

<div id="video-popup" class="loading">
    <!-- bunch of stuff in here -->
</div>

并且函数更新了...

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: "TkJcg4bmAYs",
    });
    setTimeout(function(){
        $(popup).removeClass('loading');
    }, 500);
}

CSS 看起来像这样......

#video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; opacity: 0; }
.ie7Detect #video-popup, #video-popup.loading { display: block; left: -100% }
#video-popup.open { left:0 !important; }

最后一 block 拼图是在弹出功能实际应该可见时为您的弹出功能合并一个类名“open”。

希望这可以帮助人们避免将来遇到一些潜在的麻烦。不利的一面是，在解决这些问题后，您可能不会像其他情况下那样热衷于喝醉。

和平，哟。