2

私はかなり単純な YouTube API 統合を FF/IE で動作させるために髪を伸ばしてきましたが、これまでのところうまくいきませんでした。

スコープの問題か、プレーヤーが初期化される前に呼び出しが行われているように聞こえますが、私が試したすべてのことは、これら 2 つのいずれでもないことを示唆しています。また、すべてが（のみ）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

キーボードのキーの半分を額に埋め込んだ後、ようやくイライラするほど単純な問題の根源に出くわしました... それは単なる可視性の問題です! アーッ！どうやら、FireFox と IE は、display:none; に設定された状態で初期化された場合、プレーヤー オブジェクトにアクセスできませんが、Chrome は非表示であっても初期化してターゲットにするのに十分スマートです。

私の特定のケースでは、opacity:0 の display:block としてポップアップをロードし、API を初期化し、YT api init 関数内で popup を 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 の 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 と 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 に答える