2

我一直在努力让一个相当简单的 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/

4

2 回答 2

9

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

在我的特殊情况下，修复方法是将弹出窗口加载为 display:block，不透明度：0，然后初始化 api，然后在 YT api init 函数中将弹出窗口设置为 display:none。像这样的东西：

首先，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 中，即使父容器设置为不透明度 0（在页面仍在加载时发生），youtube 播放器仍然可见。我尝试添加规则以进一步定位弹出窗口的内容并设置它们的不透明度，但没有奏效，也不是超级干净。我决定使用加载类。

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

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

难题的最后一块是在实际假设可见时为您的弹出函数合并一个类名“open”。

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

平安，哟。

于 2013-05-09T04:27:04.777 回答
1

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

其次，我正在写作，因为虽然我的问题本质上非常相似，但我试图通过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。

于 2013-10-24T15:36:05.960 回答