YouTubePlayerが進化しました。

まずは、YouTubePlayerを試してみた方。ごめんなさい。
昨日公開したやつは、バグで連続再生出来ない状態でした。

今日、これを修正して、
プレイリスト登録をクリアとチェックしたものを削除する機能を追加。
ついでに、プレイリストをクッキーに自動保存するようにしました。
次回起動からは、プレイリストを復元し、自動再生します。
YouTubePlayer

しかし、YouTubeAPI便利になったなぁ・・・
使い方も簡単だし。

ということで、基本的な使い方。
まず、
http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js
をjavascriptタグでリンクします。

これで準備完了。

javascriptからYouTubeを操作する場合、javascriptでyoutubeのflash(swf)を設定する必要があります。
↓こんな感じ。(デモのソースほぼそのままです)
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/〜〜〜&border=0&enablejsapi=1&playerapiid=ytplayer",
"screen", "425", "356", "8", null, null, params, atts);
重要なのは、太字の部分。（〜〜〜の部分には、動画のIDが入ります。）

まず、screen
ここには、divタグのidを指定します。
このdivタグを置き換えるように、flashが配置されます。
置き換えるので、このdivタグは無くなります。
YouTubePlayerでは、再生毎に置き換える必要があるので、
var parent = document.getElementById("flash");
parent.innerHTML = "";
var div = document.createElement("div");
div.id = "screen";
parent.appendChild(div);
というように、screenを毎回DOMで作ってます。

次、myytplayer
これが、youtubeをjavascriptでいじるIDになります。
swfobject.embedSWFを行うと、内部にmyytplayerというIDでオブジェクトが生成されます。
var player = document.getElementById("myytplayer");
これ以降、playerで再生の操作をすることが出来ます。
これは、必ず
onYouTubePlayerReady(playerId)
で行う必要があります。　このファンクションは、再生の準備が整うとコールバックされます。

再生状態の監視を行う場合は、
player.addEventListener("onStateChange", "changeStatus");
を追記しましょう。
再生状態が変わるたび、changeStatusファンクションが呼び出されます。
changeStatusファンクションは、引数を1つとります。
function changeStatus(status) {
}
リスナは他にもあります。

自動再生を行う場合は、
onYouTubePlayerReady内で、
player.playVideo();を呼び出してはいけません。失敗します。
setTimeout経由で呼び出しましょう。
setTimeout("player.playVideo();", 1000);
ある程度ディレイを持たないとダメみたいです。

なんかまとまり悪いけど、そんな感じ。