1

Javascript API を使用して、ページに埋め込まれた Youtube ビデオを追跡するために必要な次のコードがあります。

function onYouTubePlayerReady(playerId) {
      var youtubeplayer = document.getElementById('youtubeplayer');
      youtubeplayer.addEventListener("onStateChange", "onytplayerStateChange");
      youtubeplayer.setPlaybackQuality('large');
      }

function onytplayerStateChange(newState) {
    //Make it autoplay on page load
    if (newState == -1) {
        youtubeplayer.playVideo();
        }

    var tiempo = youtubeplayer.getCurrentTime();
    //Rounds to 2 decimals
    var tiempo = Math.round(tiempo*100)/100;
    alert(tiempo);
    }

(Youtube API に関する詳細は重要ではありませんが、興味がある場合は、以前の質問 Youtube Javascript API: not working in IE にあります)。

さて、私の問題は、onYoutubePlayerReady() 関数が DOM オブジェクトへの参照である「youtubeplayer」を宣言していることです。他の関数 onytplayerstateChange() からもその変数にアクセスする必要があります...しかし、「youtubeplayer」が宣言されていますローカル変数として。これは IE 8、Safari では機能しますが、Firefox 12 では機能しません。もちろん、「var」を使用せずに、代わりに次の方法で「youtubeplayer」への参照を取得できます。

youtubeplayer = document.getElementById('youtubeplayer');

実際、Youtube のサンプル コードではこのようになっていますが、このように記述した場合、コードは IE 8 では機能しません (Firefox 12 では機能しますが、詳細については前の質問を参照してください)。

...すべてのことから、他の関数からもアクセスできるように、関数内からグローバル変数を宣言する方法 (上記の「youtubeplayer」など) はありますか? すべてのブラウザで動作する何か？

4

2 に答える 2

3

グローバルを宣言するもう 1 つの方法は、それをグローバルな「ウィンドウ」オブジェクトの追加プロパティとして作成することです。

window.youtubeplayer = document.getElementById('youtubeplayer');

これは、ページ上の他のものからアクセスできる必要があります。したがって、完全なコードは次のようになります。

function onYouTubePlayerReady(playerId) {
  window.youtubeplayer = document.getElementById('youtubeplayer');
  window.youtubeplayer.addEventListener("onStateChange", "onytplayerStateChange");
  window.youtubeplayer.setPlaybackQuality('large');
}

function onytplayerStateChange(newState) {
  //Make it autoplay on page load
  if (newState == -1) {
    window.youtubeplayer.playVideo();
  }

  var tiempo = window.youtubeplayer.getCurrentTime();
  //Rounds to 2 decimals
  var tiempo = Math.round(tiempo*100)/100;
  alert(tiempo);
}
于 2012-05-15T20:54:36.070 に答える
2

onytplayerStateChange 関数への文字列参照をイベント リスナーに渡す代わりに、ready 関数内にイベント ハンドラーを作成し、次のように直接渡すことができます。

function onYouTubePlayerReady(playerId) {
    var youtubeplayer = document.getElementById('youtubeplayer');
    var stateChangeHandler = function (newState) {
        //Make it autoplay on page load
        if (newState == -1) {
            youtubeplayer.playVideo();
        }
        var tiempo = youtubeplayer.getCurrentTime();
        //Rounds to 2 decimals
        var tiempo = Math.round(tiempo*100)/100;
        alert(tiempo);
    };
    youtubeplayer.addEventListener("onStateChange", stateChangeHandler);
    youtubeplayer.setPlaybackQuality('large');
}

または、無名関数を直接渡します。

function onYouTubePlayerReady(playerId) {
    var youtubeplayer = document.getElementById('youtubeplayer');
    youtubeplayer.addEventListener("onStateChange", function (newState) {
        //Make it autoplay on page load
        if (newState == -1) {
            youtubeplayer.playVideo();
        }
        var tiempo = youtubeplayer.getCurrentTime();
        //Rounds to 2 decimals
        var tiempo = Math.round(tiempo*100)/100;
        alert(tiempo);
    });
    youtubeplayer.setPlaybackQuality('large');
}

これにより、「onYouTubePlayerReady」関数内の youtubeplayer 変数のスコープが保持され、グローバル変数を確立する必要がなくなります。

于 2012-05-15T21:22:29.697 に答える