3

多くの YouTube プレーヤーを含む単一の HTML があります。

ユーザーがビデオを再生したときに通知を受け取るために、onStateChange に登録しています。

function onYouTubePlayerReady(playerid) {
    var player = document.getElementById("playerA");
    player.addEventListener("onStateChange", "callback");
}

これで、コールバックは newState をパラメーターとして取得します。

function callback(newState) {
    ...
}

これは、1 人のプレーヤーだけで問題なく機能します。しかし、多数のプレイヤーがいる場合、どのプレイヤーが StateChange イベントを発生させたかを知るにはどうすればよいでしょうか? コールバックにはパラメーターが 1 つだけあります。

どのプレイヤーがイベント フォーム コールバックを発生させたかを知る方法はありますか、それともそれぞれに異なるコールバックを設定する必要がありますか?

4

3 に答える 3

3

他の回答に基づく私の解決策は次のとおりです。

id(1)オブジェクトや埋め込みタグにパラメータを追加する

playerapiid(2)動画の URL にパラメーターを追加します ( と一致する必要がありますid) 。

<object id="video1" data="http://www.youtube.com/v/AAAAAAAAAAA&version=3&enablejsapi=1&playerapiid=video1" ...>
    <embed ...>
</object>
<object id="video2" data="http://www.youtube.com/v/BBBBBBBBBBB&version=3&enablejsapi=1&playerapiid=video2" ...>
    <embed ...>
</object>

onYouTubePlayerReady(3) 各ビデオの名前付きコールバック関数を作成し、イベント内のプレーヤーに割り当てます。これを行う1つの方法は次のとおりです。

function onYouTubePlayerReady(playerApiId) {
  var player = document.getElementById(playerApiId);
  window["onStateChange" + playerApiId] = function(state) {
    console.log("#" + playerApiId + ": new state " + state);
  };
  player.addEventListener("onStateChange", "onStateChange" + playerApiId);
}

ここでデモを公開しました。

于 2012-10-22T19:17:01.683 に答える
2

私はこれとまったく同じ問題を抱えていました。これが私の解決策です：

var videos = {};

//store the video player's data in the hash, with the playerapiid as the key
function loadFeaturedVideo(youTubeVideoId) {
    videos["featuredytplayer"] = {
        "yt_id": youTubeVideoId,
        "wrapperSelector": "#featured_player_wrapper",
        "embed": "featuredYtPlayer"
    };
    ...
}

function onYouTubePlayerReady(playerId) {
    var currentVideo = videos[playerId];
    var ytPlayer = document.getElementById(currentVideo["embed"]);
    videos[playerId]["stateChangeListener"] = function(newState) {
        var container = $(currentVideo["wrapperSelector"]);

        ...
    }
    ytPlayer.addEventListener("onStateChange", "videos['" + playerId + "']['stateChangeListener']");
    ...
}

その後、クロージャーを介して必要な変数にアクセスできます。理想的には、addEventListener() で無名関数を使用するだけで済みますが、ActionScript/Javascript ブリッジの制限により、それは不可能です。

このディスカッションに触発されました: http://groups.google.com/group/youtube-api-gdata/browse_thread/thread/e8a8c85b801b9e25

于 2011-02-25T01:32:23.037 に答える
1

AdobeがFlashイベントリスナーに使用できる文字に追加の制限を課したため、@alalondeのソリューションは機能しなくなりました。[] または () は使用できなくなりました。これにより、この問題に関する以前の解決策は廃止されました。これらの文字は、次の JavaScript エラーを生成します。

識別子は、数値リテラルの直後から始まります

これが私の解決策です（ピリオド文字を使用）：

var players = {}; // global to keep track of all players on the page
function onYouTubePlayerReady (idPlayer) {
   var ytPlayer = document.getElementById (idPlayer);
   var idPlayerParams = 'yt' + Math.floor (Math.random()*100000); // create random varable name
   players [idPlayerParams] = {
        idPlayer: idPlayer,
        onStateChanged: function (state) {
            alert ('youtube player state changed to: ' + state + ', player id: ' + idPlayer);
        },
        onError: function (err) {
            alert ('youtube player error: ' + err + ', player id: ' + idPlayer);
        }
    };
    ytPlayer.addEventListener ('onStateChange', 'players.' + idPlayerParams + '.onStateChanged');
    ytPlayer.addEventListener ('onError', 'players.' + idPlayerParams + '.onError');
}
于 2012-02-29T00:01:14.590 に答える