YouTubeの動画(Flash)プレーヤーをJavaScriptから制御する

YouTubeのflash playerをJavaScriptで再生、停止したくて調べたメモ。

これは、YouTube JavaScript Player APIを使うと(比較的)簡単にできる。Google Codeには何ができるか分かるデモサイトがあるので参考に。

特定の動画を再生させるだけならデベロッパー登録は特に必要ない。

やり方はドキュメントに詳しく書いてあるので、主にそちらを参考に。

埋め込むスクリプトはswfobjectを使う。

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
var url = "http://www.youtube.com/v/hogehoge?enablejsapi=1&playerapiid=ytplayer&rel=0&version=3";
swfobject.embedSWF(url, "ytapiplayer", "640", "505", "8", null, null, params, atts);

rel=0を付けると動画が再生終わったあとに関連動画を表示しない。

version=3はflashplayerのバージョンをAS3に指定。

あと困ったのは、jQuery UIのダイアログ内で再生させるときに、IEだけ2回目以降のダイアログを開いたときにonYouTubePlayerReadyイベントが発生しない。しょうがないので、ブラウザ判定をして、IEだけ直接loadVideoByIdを使って再生するようにした。

その他YouTubeのロゴが表示されるのが嫌だったり、もっとカスタマイズしたい場合はflowplayerを使う方法もある。

 

<関連記事>

flv形式の動画をWebで配信可能なフラッシュプレーヤー
オープンソースなフラッシュ(SWF)形式のプレーヤーFlowPlayer