jQueryプラグイン Text on YouTubeの不具合を訂正しました
/* 第2引数に文字列化したコードを渡している */ yt.player.addEventListener('onStateChange', '(function(state) { youtubeStateObserver(state, "' + videoID + '"); })');こうしなければならなかったのは、onStateChangeイベントが発生したとき、同一ページに複数のプレイヤーが存在したとき、イベントがどのプレイヤーで発生したのか探る手立てがなかったからです。のためその解決のために次のエントリを参考にしていました。⇒youtube javascript API onStateChangeが発生したplayerを特定する方法 しかし、前述のように最近になって、プレイヤーオブジェクトのaddEventListenerがeval評価しなくなったため、プラグインのコントローラなど多くの機能が停止しました。 その上、addEventListenerに指定する関数はグローバル名前空間になければいけませんでした。つまりwindow.xxxといった形で定義しなければならず、異なるプレイヤーでまったく同じコールバックが呼び出されてしまいます。そして、コールバックに渡される仮引数はプレイヤーの状態を表す数値のみで、プレイヤーIDは渡されません。プレイヤーの特定など元からできないわけです。 試行錯誤の末、下記にあるように各々のプレイヤーが初期化されるタイミングで、それぞれのプレイヤー専用の名前をつけたコールバックを無理やり作成して対策することにしました。 jquery.text-on-youtube.js v0.9.2の538行目あたり
/* 本当はこんな風にして動的に変数名を決めたいのだけど、このやり方では無理 */ window.'youtubeStateObserver_' + videoID = function (state) { ........ ........ /* しかし、ここがJavaScriptの柔軟なところ */ /* 連想配列を作るときのようにすれば、関数の変数名を動的に決められる */ window['youtubeStateObserver_' + videoID] = function (state) { ........ ........ /* その後にイベントハンドラで先ほど動的に作った変数名を渡す */ yt.player.addEventListener('onStateChange', 'youtubeStateObserver_' + videoID);ともかく、これでプレイヤーでイベントが発生したとき、プレイヤーごとに対応することができます。 五つあるデモページはすべて修正しました。プラグイン紹介ページの最新バージョン(version 0.9.2)を更新したので、ユーザーの方はご確認ください。 ⇒Text on YouTube – YouTube動画上にテキストを表示するjQueryプラグイン ⇒デモページ – 複数の動画を埋め込む