6

youtube api // onStateChange コールバック関数にこれが必要です!

複数の YouTube プレーヤーによって発行された「onStateChange」イベントをリッスンする関数をプログラムで作成したいと考えています。リスナーの追加はすでに機能しています：

function onYouTubePlayerReady(playerId) {
  var ytpStateManager = playerId +"_StateManager";
  document.getElementById(playerId).addEventListener("onStateChange", ytpStateManager );
...

playerId 変数 (「ytp_1」、「ytp_2」、...) に基づいて作成する必要がある関数は次のとおりです。

function ytpStateManager(newState) {
  ytpStateHelper(playerId , newState);
}

したがって、playerId "ytp_1" の結果は次のようになります。

function ytp_1_StateManager(newState) {
  ytpStateHelper("ytp_1", newState);
}

動作しますが、今はプレイヤーごとに手動で追加する必要がありますが、これは私が必要としているものではありません。新しいプレーヤーが readyState イベントを送信したときに、それらを自動的に作成したいと考えています。

私の問題は、これらの関数が正しく機能するにはグローバル関数である必要があるように見えることです。数日間、いくつかのオプションを試しました。私の問題は、(方法があれば) グローバル関数を定義する方法がわからないことです。別の変数に基づく、プログラムによる関数名。

ytp が状態とプレイヤー/ターゲットを含むイベントを発行しないのは残念です。物事をはるかに簡単にします。すべてのstateChangesで何かを行うにはすべてが必要なので、これは基本的に回避策です。

より良い/より簡単な方法がある場合は、お知らせください:)それ以外の場合、この質問の解決策は大歓迎です。

イベントをより「アクセスしやすく」するために、イベントを再ルーティングする方法はあるのでしょうか?

.addEventListener もオブジェクトを取るという仕様を読んだので、イベントを専用のオブジェクトにバインドしようとしました。しかし、再び、それはトリガーされませんでした。私はすべてをテストしたように感じます...

更新 私は今、(swfobject から) iframe プレーヤーに切り替えています。これは、playerId と状態を含むイベントを提供するためです:D 間違った ytplayer と 1 週間過ごした後、これは大きな進歩のように感じます。また、yt は、サポートされている場合に html5 を動的に使用できる iframe プレーヤーを使用することを望んでいるようです。

4

4 に答える 4

5

関数を返す関数を作成します。

function createStateManager(playerId) {
    return function (newState) {
        ytpStateHelper(playerId , newState);
    }
}

次に、イベント リスナーを設定するときに関数ファクトリを呼び出します。

var player = document.getElementById(playerId);
player.addEventListener("onStateChange", createStateManager(playerId));

デバッグ

うまくいかない理由はわかりませんが、ここにデバッグの提案があります。ハンドラーで を取得していない可能性がありplayerIdます。onYouTubePlayerReady

function onYouTubePlayerReady(playerId) {
    console.log('Player ready. The player id is: ' + playerId);
    var ytpStateManager = playerId +"_StateManager";
    var player = document.getElementById(playerId);
    player.addEventListener("onStateChange", createStateManager(playerId));
}

function createStateManager(playerId) {
    return function (newState) {
        console.log('State changed for player ' + playerId + '. New state is ' + newState);
        ytpStateHelper(playerId , newState);
    }
}

それを試して、両方のconsole.log呼び出しから得たものを投稿していただけますか?

于 2012-09-24T00:00:04.140 に答える
2

1)You can create Function object new Function([params], "BODY") So you can combine body of your function as string variable and put into as BODY

Example: var twoNumAverage = new Function("x", "y", "return (x + y)/2") console.log(twoNumAverage(3,7))

2)And new can create dynamically name and BODY

Example

var globalObject ={};
var nameFn ='MyNewFunction';

var createFn  = function(object,functionName, Body){
   object[functionName]= new Function(Body); 
}

createFn(globalObject,nameFn,"return (arguments[0] + arguments[1])/2");

You can call your new function:

globalObject[nameFn](10,20);

Result: 15

Please note that in body your function you can get params via collection arguments

于 2012-09-24T11:54:54.030 に答える
0

指定したコンテキストで別の関数を実行する名前付きプロキシ関数を作成する方法を次に示します。

function createNamedProxy(name, fn, context) { 
  var template = [
          '(function @name() {',
          '  @name.fn.apply(@name.context || window, arguments);',
          '})'
      ].join('').replace(/@name/g, name),

  result = eval(template);
  result.fn = fn;
  result.context = context;

  return result;
}  

// Example Usage
var anonymous = function() { alert( document === this ); },
    named = createNamedProxy('Named', anonymous, document);

// Will alert 'true'
named();

上記のソリューションは、好きなように実行する名前付き関数を作成して返すことができる関数を作成します。コンテキストを指定しない場合、通常の無名関数と同じようにウィンドウ オブジェクトが想定されます。必要なソリューションを作成するには、次のようにします。

var varName = 'ytp_1';
window[varName + '_StateManager'] = 
    createNamedProxy(varName + '_StateManager', function(newState) {
      ytpStateHelper(varName, newState);
    });

varName は、任意のプログラム上のプレフィックスにすることができます。ytp_1_StateManager() を呼び出すときに、newState 値を渡すと、コードは変数名と newState を使用して ytpStateHelper を呼び出します。

お役に立てれば。

于 2013-04-13T23:19:01.093 に答える
0 
window["foo"+"bar"] = function(){ console.log("foobar is called"); }
于 2012-09-24T00:00:40.240 に答える