古籏一浩のJavaScriptラボ ― 第34回
HTML5 videoでニコニコ動画風プレーヤーを作ろう
2010年05月19日 11時00分更新
※この記事は「古籏一浩のJavaScriptラボ」の第34回です。過去の記事も合わせてご覧ください。
|
|---|
| HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） |
動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。
ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。
今回はHTML5 videoとJavaScriptで、ニコニコ動画のようなテロップ表示プログラム（テロッパー）を作ってみましょう。実際にニコニコ動画のようなWebサービスを作るにはサーバー側のプログラムも必要ですが、今回は動画にテロップを重ねて表示するプレーヤー部分のプログラムを作ります。テロップデータはJSON形式の別ファイルで管理するので、容易に更新できる仕組みです。
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
