YouTube API - Firefox/IE返回错误“X不是一个函数”对于任何'玩家.'请求

YouTube API - Firefox/IE return error "X is not a function" for any 'player.' request

本文关键字：函数 一个 于任何 请求 玩家 IE Firefox API 返回 错误 YouTube      更新时间：2023-09-26

我一直在扯我的头发，试图得到一个相当简单的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/

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

修复，在我的特殊情况下，是加载弹出窗口显示:块与透明度:0，然后初始化api，然后设置弹出窗口显示:none内YT api init函数。像这样:

首先,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 ready函数中设置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和ie8中，即使父容器设置为不透明度0(当页面仍在加载时发生)，youtube播放器仍然可见。我试着添加规则来进一步瞄准弹出框的内容，并设置它们的不透明度，但没有工作，也不是超级干净。我决定使用一个加载类。

这个弹出窗口有一个加载类:

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

And function is updated…

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

最后一块拼图将合并一个类名'open'为你的弹出函数，当它实际上应该是可见的。

希望这能帮助人们在未来避免一些潜在的头痛。不利的一面是，在解决了这些问题之后，你可能不像以前那样热衷于喝醉。

和平、哟。

首先，感谢您解决了这个问题。和你一样，我想我尝试了所有我能找到的解决方法，但都无济于事。

第二，我正在写作，因为虽然我的问题在本质上非常相似，我试图通过bxSlider jQuery插件加载视频，我想发布我的解决方案，希望它可以节省别人一些时间。

我只是在onSliderLoad方法上调用了一个函数。函数是这样的:

function()
{
  if ($('.slideshow-item-video').length > 0) {
    $('.slideshow-item-video').each(function()
    {
      $(this).css('display', 'block');
      setTimeout(function()
      {
        $(this).css('display', 'none');
      }, 500);
    });
  }
}

我只是给包含视频的幻灯片一个特定的类，使它们可见，这样API就可以访问元素，然后设置一个超时来再次隐藏元素。

此解决方案适用于Firefox和IE8+。我还没有找到IE7的解决方案，但是，它是IE7。

相关文章：