0

YouTube ビデオを含む Facebook タブ アプリケーション (おそらく関係ありません) があります。

ページが空のキャッシュから最初に読み込まれたときに、すべてが正常に機能します。ただし、その後のページの読み込みでは、ビデオの読み込みが停止するとonStateChange、Internet Explorer でハンドラーが起動しなくなります。

Chrome と Firefox ではすべて正常に動作します。この問題は IE にのみ影響するようで、奇妙なことに、空でないキャッシュからのみ発生します。問題が. _Status: Fixed

コードの関連するチャンクは次のとおりです。

ページ

<!DOCTYPE html>

...

<div class="player-surround">
   <div id="ytplayer">
       You need Flash player 9+ and JavaScript enabled to view this video.
   </div>
</div>

...

<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "ytplayer" };
// YouTube video ID redacted here
swfobject.embedSWF("http://www.youtube.com/v/XXXXXXXXXXXXXX?enablejsapi=1&playerapiid=ytplayer&version=3",
   "ytplayer", "587", "330", "8", null, null, params, atts);
</script>
<script src="//www.youtube.com/player_api"></script>

含まれる JavaScript

MFA.onPlayerStateChange = function(evt) {
    var state = this.getPlayerState();
    log('158: STATE CHANGED: ' + state);

    // Then do some stuff, but the `log` call above doesn't fire
}

MFA.getPlayerState = function() {
    var playerState;

    if (this.ytplayer) {
        playerState = this.ytplayer.getPlayerState();
        
        switch (playerState) {
            case 5:  return 'video cued';
            case 3:  return 'buffering';
            case 2:  return 'paused';
            case 1:  return 'playing';
            case 0:  return 'ended';
            case -1: return 'unstarted';
            default: return 'Status uncertain';
        }
    }
};

(明らかに、私はこの問題に関係のないコードをたくさん見逃していました。)

IEが以前にページを見たことがない限り、なぜすべてがうまくいくのか、誰にも考えがありますか? IE では機能しなかったかどうかは理解できましたが、キャッシュが空の場合は問題なく機能しますが、ページをリロードすると失敗します。

すべてのアイデアに感謝します。

編集

Greg Schechterは、私のコード サンプルがiframe 埋め込みコードswfobject.embedSWFではなくコードを使用していることを指摘しました。

元々は iframe 埋め込みコードを使用していました。

var s = {
   playerHeight: '330',
   playerWidth: '587',
   playerVars: { 'rel': 0 },
   videos: {
      stage1: 'XXXXXXXXXXXXXX', // ...
   }
};

window.onYouTubePlayerAPIReady = function() {
   MFA.ytplayer = new YT.Player('ytplayer', {
      height: s.playerHeight,
      width: s.playerWidth,
      videoId: s.videos.stage1,
      playerVars: s.playerVars,
      events: {
         'onReady': $.proxy(MFA.onPlayerReady, MFA),
         'onStateChange': $.proxy(MFA.onPlayerStateChange, MFA),
         'onError': $.proxy(MFA.onPlayerError, MFA)
      }
   });
}

、しかし、これは同じ問題を示していました。その後、問題を修正する試みとしてコードが追加されました。swfobject.embedSWFこれは、IE が iframe からドメインをまたがる API アクセスに過度に偏執的であるという問題が以前に見られたためです。

4

2 に答える 2

0

コードサンプルは少し外れています。で使用swfobject.embedSwfしているようです//www.youtube.com/player_api。スクリプトは //www.youtube.com/player_apiiframe埋め込み専用です。iframe埋め込みを使用すると、問題が解決するはずです。

詳細はこちらをご覧ください。 https://developers.google.com/youtube/iframe_api_reference

于 2012-10-30T20:38:30.510 に答える
0

そのため、私はこれをやめて別のプロジェクトに戻らなければなりませんでしたが、同僚の 1 人が解決策を見つけることができました。この回答の残りの部分は、彼からのメールから直接引用したものです。

これは、この (非常に厄介な!) IE の問題をどのように修正したかを示す長いバージョンです。これは、default.aspx ページで YouTube Player API を呼び出す方法を変更した場合であることが判明しました。

これを置き換えました： 

<script src="//www.youtube.com/player_api"></script>

<script>タグ 内に次の JavaScript を使用します。

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

(それはAPI リファレンスで指定されている方法です)。

また、Googleが指定していることに気付きましたiframe_apiが、使用していplayer_apiました。それは問題を悪化させたかもしれませんが、それを変更しただけでは問題は解決しませんでした。

[当社のテクニカル ディレクター] が私に説明してくれたのは、ページが最初に読み込まれるときは元の方法で問題なく、すべてが新しく読み込まれ、init.js が初期化される前に YouTube API を読み込むのに十分な時間があるということでした。

しかし、ページをリロードするinit.jsと、API の準備が整う前にキャッシュされ、おそらくロードが速すぎたため、起動しようとしたときに失敗しましたonYouTubePlayerReady。上記の方法でも から開始されますinit.jsが、同時に のロードも開始iframe_apiされます (リストの最初のスクリプト タグとして効果的に挿入することにより)。また、AJAX 呼び出しによってメモリ リークが発生する可能性がある IE9の既知の問題に少し関連している可能性もありますが、確かではありません。

他のブラウザでも同じエラーが (非常に) 断続的に発生しています。これは、ここと Google API が接続しているデータ センターとの間でRTDが変動しているためだと思います。init.jsAPI の準備が整う前に十分な同期が取れていない場合、onYouTubePlayerReady失敗します。ただし、簡単な更新で修正されます。

興味深いのは、YouTube API を最初のスクリプト タグとして配置するだけでは違いがないということです。

つまり、サード パーティの API、iframe、および Internet Explorer を扱う場合、特に YouTube と Facebook の両方が関係している場合は、すべてのサード パーティの API に対して非同期読み込みを使用する必要があるということです。

于 2012-11-01T18:30:12.103 に答える