saiten＠blog

■[diary][programming]ニコニコ動画をHTML5で見るbookmarklet

性懲りも無くニコニコネタです。

iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。

使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。

javascript:(function(){var e=document.createElement("script");e.src="http://labs.isidesystem.net/nicoh5/nicohtml5.js";document.body.appendChild(e);})();

動作条件として、アップロードされた動画がh.264の形式であることが条件です。また、ブラウザについてもh.264をvideoタグでサポートしている必要があります。こちらの環境ではmacのsafari4とchrome5、Windows XPのchrome4で動作を確認しています。

上が本家のFlash版プレイヤーで下が今回作成したHTML5版のプレイヤーです。mpeg4でアップロードされている動画は大体再生できるんですが、これまで再生できたのに再生できなくなる事もあって、結構不安定。コメントの再現性もあまり良くないですが、動画の方はFlashに比べれば結構滑らかに動きます。初代macbook air+safariだと、Flash版ではカクカクだった画像の動画が、HTML5ならヌルヌル動くあたり、ジョブスが「Flashビデオは遅い」と言ってしまうのもまぁ、わかります。(もちろん本家プレイヤが機能豊富すぎるというのもありますが)HTML5版プレイヤーの上下にニコ割枠とコメント入力欄がありますが、これはただの飾りですので機能しません。(^^;

動画URLの取得やNGリストの取得はXMLHttpRequestで行っていますが、コメントサーバは別ドメイン(msg.nicovideo.jp)となるため、今回はJSONPで取得できるよう、GAE上にコメントプロクシを作成し中継しています。動画情報を取得する際に得られるthread_idというパラメタを渡しますが、セキュリティ上は特に問題ないと思います・・・(自信なし)。

また、デフォルトではコメントはcanvasを用いて描画していますが、ついでにdivタグでコメントを再現するバージョンも作りました。このバージョンのbookmarkletは以下になります。(速度的にあまりメリットはありません)

javascript:(function(){NicoHTML5_OverlayType="dom";var e=document.createElement("script");e.src="http://labs.isidesystem.net/nicoh5/nicohtml5.js";document.body.appendChild(e);})();

とりあえず、卒論と卒論発表が終わった勢いで作ってしまいましたが、ドワンゴ内でもHTML5製プレイヤーを作っている様(http://twitter.com/kawango/status/8668680800)なのでそちらに期待。

一応、今回作成したソースコードは、コメントプロクシ含め、github上に置いておきます。

2010/5/17 追記

ニコニコ動画の動画取得用のAPIが、www.nicovideo.jpからflapi.nicovideo.jpにリダイレクトされるようになったため、Ajaxを用いた動画取得が出来なくなった模様です。

これといった解決策も思い当たらないので、今のところ当ブックマークレットは利用できません。ご了承ください。

2010/5/28 追記

とりあえず再生までに2手間ほど増やすという(ユーザが動画URL文字列コピー＆ペースト)超暫定的措置でとりあえずAPI変更に対応。こんな面倒くさいことしなくても済むようにするには、flapi.nicovideo.jpがXHR2に対応してくれるとか期待するしかないかなー、と。(本家のHTML5対応が一番なんですが)

あと、iPadではiCab Mobileを利用してAPI対応させたモジュールを開発してくれた方がいるようです。iCab Mobileを持っている人はこちらを使った方が幾分か簡単です。

http://www37.atwiki.jp/icabmobilemodule/pages/20.html

Permalink | コメント(0) | トラックバック(15) | 00:02