ニコニコ動画を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を用いた動画取得が出来なくなった模様です。
これといった解決策も思い当たらないので、今のところ当ブックマークレットは利用できません。ご了承ください。
