saiten@blogスマートフォン用の表示で見るsaiten@blogこの広告は、90日以上更新していないブログに表示しています。programming性懲りも無くニコニコネタです。iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。e=document.createElement("script");e.src="http://labs.isidesystem.net/nicoh5/nicohtml5.js";document.body.appendChild(e);})();動作条件として、アップロードされた動画がh.264の形式であることが条件です。ブラウザについてもh.264をvideoタグでサポートしている必要があります。XPのchrome4で動作を確認しています。上が本家のFlash版プレイヤーで下が今回作成したHTML5版のプレイヤーです。mpeg4でアップロードされている動画は大体再生できるんですが、これまで再生できたのに再生できなくなる事もあって、結構不安定。コメントの再現性もあまり良くないですが、動画の方はFlashに比べれば結構滑らかに動きます。air+safariだと、Flash版ではカクカクだった画像の動画が、HTML5ならヌルヌル動くあたり、ジョブスが「Flashビデオは遅い」と言ってしまうのもまぁ、わかります。(もちろん本家プレイヤが機能豊富すぎるというのもありますが)HTML5版プレイヤーの上下にニコ割枠とコメント入力欄がありますが、これはただの飾りですので機能しません。(^^;動画URLの取得やNGリストの取得はXMLHttpRequestで行っていますが、コメントサーバは別ドメイン(msg.nicovideo.jp)となるため、今回はJSONPで取得できるよう、GAE上にコメントプロクシを作成し中継しています。動画情報を取得する際に得られるthread_idというパラメタを渡しますが、セキュリティ上は特に問題ないと思います・・・(自信なし)。デフォルトではコメントはcanvasを用いて描画していますが、ついでにdivタグでコメントを再現するバージョンも作りました。このバージョンのbookmarkletは以下になります。したソースコードは、コメントプロクシ含め、github上に置いておきます。追記ニコニコ動画の動画取得用のAPIが、www.nicovideo.jpからflapi.nicovideo.jpにリダイレクトされるようになったため、Ajaxを用いた動画取得が出来なくなった模様です。これといった解決策も思い当たらないので、今のところ当ブックマークレットは利用できません。追記とりあえず再生までに2手間ほど増やすという(ユーザが動画URL文字列コピー&ペースト)超暫定的措置でとりあえずAPI変更に対応。こんな面倒くさいことしなくても済むようにするには、flapi.nicovideo.jpがXHR2に対応してくれるとか期待するしかないかなー、と。Mobileを利用してAPI対応させたモジュールを開発してくれた方がいるようです。Mobileを持っている人はこちらを使った方が幾分か簡単です。mobile用NicoHTML5いつの間にかiPadのsafariでニコニコ動画の動画ページを見ると...2010-04-26NicoHTML5をiPadで試す結論から言うと今のとこ、コメントを載せての再生は無理です。...2009-04-13iPhoneでニコニコ動画を見られるアプリを作ってみたどんだけニコ厨やねん。大学が春休みに入ったのと、春休み突入...2009-03-24iPhone向けニコ動アプリhttp://weekly.ascii.jp/2009/03/iphone_27.htmlが出るみたいね...2008-10-20Softbank携帯で各動画サイトの動画を見られるサービス「moVbile」を公開しましたアプリの承認が出たので告知。mobile用NicoHTML5月別アーカイブはてなブログをはじめよう!saitenさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。