Ustreamがいつの間にかFlash無しでもライブ配信が見れるようになってたんで、HTML5のVideoプレーヤーをカスタマイズしてiPad用のオレオレUstreamViewerを作ってみたよ。小ネタ。

Ustream Data APIからチャンネル情報を取得

Ustream Data APIを使うと、配信中の動画、ユーザー、チャンネルとかの情報が取得できます。例えばチャンネル情報だとこんな感じ。

http://api.ustream.tv/json/channel/チャンネル名/getInfo

APIからはXML、JSON、PHP、HTMLの形式から取得できます。今回はJSONで取得します。必要なのは、「チャンネルのID」「Twitterのハッシュタグ」「チャンネルのサムネイル画像」クロスドメインな環境になるので、JSONPで取ってきます。jQueryでやるならこんな感じ。callback=?は忘れずに。

$.getJSON(
  "http://api.ustream.tv/json/channel/" + チャンネル名 + "/getInfo?callback=?",
  function(data, status){
    cid = data.id;
    cimg = data.imageUrl.medium;
    hashtag = data.socialStream.hashtag;
});

ストリーミングを配置

ストリーミングは（今んとこ）こんな感じのURLから直に取ってこれるようです。

http://iphone-streaming.ustream.tv/ustreamVideo/チャンネルのID/streams/live/playlist.m3u8

これをVideoのソースに指定してあげると再生してくれます。かんたんですねー。デフォルトのUIだと寂しいんでCSSでカスタマイズできるVideo.jsを使って、Vimeo風なUIにしてみました。

Video JS | HTML5 Video Player

<div id="player" class="video-js-box vim-css">
  <video id="video" class="video-js" width="1024" height="516"controls>
    <source src="http://iphone-streaming.ustream.tv/ustreamVideo/http://api.ustream.tv/json/channel/チャンネルのID/streams/live/playlist.m3u8" type="video/mp4">
  </video>
</div>

こんな感じでHTMLを用意して、JSとCSSを読み込んで初期化時にVideoJS.setup();を叩けばいいだけです。

ただ、iPadのvideoは本体のplayerに依存してるのか、vdeoタグの領域上にレイヤーを重ねると、表示がおかしかったり、フォームにフォーカスがいかななかったりするんで、コントローラーは外側に出されるようになっているよーなんで。PC上で確認する時には注意。

（追記100819）
Video.jsだと動的な読み込みがうまくいかないんで、 「Tutorial: How to Build an HTML5 Video Player」 を参考にCSSとJSで直に実装するように修正しました。やってることは同じなんですが。。詳しくはソースを見て。

TwitterのTLを取得

これだけじゃさびしいんで、SocialstreamのチャンネルTLを流すようにしてみます。極力JSで解決したかったんで、

・ハッシュタグなどでtwitter検索した結果を表示して自動更新するjavascript

この記事を参考、とうかそのままを使って、ハッシュタグを検索したTLを読み込みます。TLは横にしてフリックでスクロールさせたいんで、jQuery.flickableを使って実装します。

jQuery.flickable

こんな感じにスクロールさせたいブロックのIDを指定するだけ。

$('#flickable1').flickable();

できたできた。

チャンネル名を入力するフォームとかを追加。iPadだけで動けばいいんでCSS3の手習いも兼ねて、角丸とかグラデはCSSにまかせてみますｗ。詳しくはソース見れ。できたのはこつら↓

USTView for iPad 02 (iPadで見てね)

チャンネル名を入力してPLAY。iPhoneだとインラインで再生できないんで、ムービープレーヤーの方に飛ばされる。ちなみに動画がiPhone/iPad対応されてないとそもそも再生されません。なんかホーム画面に登録すると動画が再生されぬ。Video JS使わない方がいいのかも。。

（追記100819）
ホームに登録しても再生できるようになりました。でもSafariからはボリュームは操作できない様子。んー。

まとめ

もっといろいろ機能を足したいけど、わかんないとこがいっぱい出てきたから止め。JS勉強して出直してきます。。