ブログ上でYoutubeのお気に入りビデオを再生するU2B Player
今やユニークユーザ数でGoogle Videoを圧倒し、映画配給会社のプロモーションにも使われるようにまでなったYouTube.com。所謂Social Serviceで、ユーザーが投稿したビデオを評価・共有できる。音楽PV好きとしては、Flash Video採用で画質・音質ともにイマイチな同サービスより、この間タグを貼ってみたGoFish.comのほうがお気に入りなんだけども、API(Web Services)が公開されているという意味ではYouTube.comに軍配が上がる。その割にはこのAPIを使ったネタがないなーと思って作ってみたのが右サイドバーに貼ってある「U2B Player」。U2Bとかいてユーチューブと読む。読んでくれ。読んで下さい。再生画面の下に並んでるサムネールをクリックするとそのビデオが再生画面に表示されて、再生ボタンを押すと再生されます。
前のエントリのG2V Player同様使い方は簡単で、JavaScriptの使えるブログに下記のSCRIPTタグをサイドバーに貼るだけ。前回同様、 ココログの場合は「マイリスト」→「新規作成(リンク)」→「テキスト表示(設定)」でSCRIPTタグをベタ打ち、livedoorブログの場合は「カスタマイズ/管理」→「プラグインの設定」→「新規追加」→「上級者向けプラグイン(Javascript)」で下記のURLを指定する。但し、今回はいくつか機能をつけたのでパラメータを指定しないといけない。
<script src="http://www.got2do.com/api/U2Bplayer.php?
mode=[モード]&user=[ユーザID]&proxy=[プロキシ名]"
type="text/javascript" charset ="utf-8"></script>
| mode | 3つのモードを指定可能。省略した場合は「top」を指定したと見なされる。3つのモードについては各々下記。 |
| user | modeが「favorite」「uploaded」のとき、ユーザーIDを指定する。 |
| proxy |
YouTube.comからGETしたXMLをJSONに変換するプロキシを指定する。
|
よって、例えばユーザー名teddygのお気に入りビデオを貼りたい場合は下記のいずれかになる。
<script src="http://www.got2do.com/api/U2Bplayer.php?mode=favorite&user=teddyg" type="text/javascript" charset ="utf-8"></script>
<script src="http://www.got2do.com/api/U2Bplayer.php?mode=favorite&user=teddyg&proxy=drk7" type="text/javascript" charset="utf-8"></script>
言うまでもないが、パラメータを全て省略するとYouTube.comのトップで紹介されているビデオが表示される。
スクリプトの内容についてはG2V Playerと同じで、JSONで受け取ったデータを配列に読み込んで、HTMLに整形してブログに挿入しているだけ。今回は自前のgot2do.comのプロキシ以外にdrk7.jpさんの提供するXML2JSONサービスも利用できるようにしてみた。ウチのサーバの負荷分散とかいうわけではなくて、単に使ってみたかっただけです。
XML2JSONサービスではパラメータvarで指定した関数のdataプロパティをJSONで吐き出した上、onload()メソッドを実行するようになっているので、まずはJavascript上でそれを定義する必要がある。今回はonloadメソッドだけを持つjsonU2Bという関数を用意し、jsonU2B.onload()は実際のHTML生成等を行うplayU2Bオブジェクトのインスタンスを生成してplay()メソッドを実行するだけにしています。ソースコード自体はG2Vplayerとほとんど同じなので、使ってもないnext()とprev()のメソッドが名残として残ったままになっている。まあ気にしない。
あと、XML2JSONサービスでは元のXMLデータが複数の同一要素を持っている場合(例えばRSSにおけるitem要素みたいなの)に、数値をキーとする配列ではなく、各々の要素のID?みたいなの?をキーとする連想配列としてJSONが吐き出される。よって、各々の要素にアクセスするにはキーを指定する必要があるので、そのキーだけを別の配列としてplayU2Bのプロパティとして持つようにして処理しています。ってもう何のことだかわかんないな。
ってなわけで、ブログ上で自分の見つけた面白ビデオを紹介したい人だとか、自分の子供や孫を動画で自慢したい人、自分とか自社とかのビデオをPRしたい人、例えばライブ映像を流したいバンドの人だとかにはいいんじゃないでしょうか、ねえollirodge兄さん。
【追記】アサマシ機能(リスティング機能)と上述のオプション設定をする為のツールを作りました。設定用ツール(ページ)はこちら、詳細解説はこちらです。
【追記2】ページ内でLightBoxのように動画をオーバーレイさせて表示させる機能を追加しました。詳細解説はこちらです。
【追記3】U2B Player読み込み完了後に、ページ内のすべてのYouTubeへのリンクを、ページ内での動画オーバーレイ表示させる機能(Link2B)を追加しました。詳細解説はこちらです。
「WEBサービス」カテゴリの記事
- Virtual化する社会(Short ver.)(2008.03.14)
- U2Bplayer、改修+ややupdate(2007.12.24)
- PEAR::Services_Lingrで日本語を扱うときの注意(2007.07.06)
- 今見ているページにGoogle Mapsを追加するBookmarklet(2007.06.29)
- Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map(笑)(2005.10.14)
「インターネット」カテゴリの記事
- Virtual化する社会(Short ver.)(2008.03.14)
- U2Bplayer、改修+ややupdate(2007.12.24)
- PEAR::Services_Lingrで日本語を扱うときの注意(2007.07.06)
- 今見ているページにGoogle Mapsを追加するBookmarklet(2007.06.29)
- Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map(笑)(2005.10.14)
「音楽」カテゴリの記事
- ブログ上でYoutubeのお気に入りビデオを再生するU2B Player(2006.03.23)
- 2006年最後のMashUp、Last.Tube(2006.12.31)
- 映像とか音楽とかのサービスのMashUpについて、あと最近聴いてる曲(2006.12.29)
- YouTubeの動画をブログに貼ってAmazonアフィリエイト(2006.04.05)
- TEST OF GOFISH TAG(2006.02.22)

Comments
ありがとうございますセンセイ。ちょっとやってみます。
Posted by: olliroji | 2006.03.22 at 06:16 PM
貼り付けさせていただきます。
こんなの作っていただいて、有賀さつきDES。
Posted by: Ales Hemsky | 2006.06.05 at 04:19 AM