社内案件で、YouTube APIを使ったWebアプリを作ってるんだけど、
そのときにハマッたのでメモ。以下は失敗した例。

// 前提として、prototype.jsを使ってる
var Player = Class.create({
  player: '',
  create_player: function(video_id){
    var params = {allowScritpAccess: "always"};
    var atts = {id: "myytplayer"};
    swfobject.embedSWF("http://www.youtube.com/v/"+ video_id +"&enablejsapi=1&playerapiid=ytplayer&autoplay=1&rel=0&showsearch=0&showinfo=0", "ytapi_player", "460", "382", "8", null, null, params, atts);
    this.player = $("myytplayer");
    this.player.addEventListener("onStateChange", "player_check_state", false);
  }
});

function player_check_state(new_state){
  // 状態がかわったときの処理なんだけど、まったく呼ばれる気配なし…
}

var Test_Player = new Player();

原因は、swfobject.embedSWFメソッドを呼んですぐにプレイヤーをplayerメンバ変数に代入していたから。これだと、まだプレイヤーが生成されていなくて、エラーを引き起こしてしまう。

// 修正版
var Player = Class.create({
  player: '',
  create_player: function(video_id){
    var params = {allowScritpAccess: "always"};
    var atts = {id: "myytplayer"};
    swfobject.embedSWF("http://www.youtube.com/v/"+ video_id +"&enablejsapi=1&playerapiid=ytplayer&autoplay=1&rel=0&showsearch=0&showinfo=0", "ytapi_player", "460", "382", "8", null, null, params, atts);
  }
});

// プレイヤーの準備が出来たら呼ばれるコールバック関数
function onYouTubePlayerReady(playerId){
  Test_Player.player = $("myytplayer");
  Test_Player.player.addEventListener("onStateChange", "player_check_state", false);
}

function player_check_state(new_state){
  // 状態がかわったときの処理
  // 呼ばれた
}

var Test_Player = new Player();

ちゃんと、プレイヤーの領域上にプレイヤーの準備が出来てからでないと、
イベントが設定できないので要注意ですな。

Tweet