HTML5ビデオ導入編

1. HTML5ビデオ導入編

2. インターネット動画基礎知識
 現状
YouTube、ニコニコ動画などでも広く利用されているFLV形
式が一般的
 iPhone, iPadなどのSmartPhoneの登場
FlashPlayerに対応していないので、必然的に動画を再生す
るには、HTML5配信をしなければならない
 Android携帯はFlashPlayer10.1が搭載され始めているが、
FLVの再生をソフトウェアレベルで行っているため、電池の
減りが早くなるなどの問題点もあり
Flash, HTML5のハイブリット配信が必要

3. 動画配信CMS各種
無償で利用するなら、YouTubeはすでにFlashPlayer, HTML5に対応しており
デバイスによって表示されるビデオ自動的に選択される
ビジネス利用であれば、
BrightCove、Ooyala、Kalturaなどの動画CMSを利用できる
大体、10,000円ぐらいから
お金がかかるので
自前のサーバでやれる方法を探してみましょう

4. 動画配信の仕組みを理解する
 プログレッシブ
HTTPレスポンスとして動画データをクライアント
に送り、ある程度バッファがたまったら再生する仕
組み
特別な仕組みが必要ないので、動画データをサーバ
においておくだけで配信ができる
 ストリーミング
ストリーミングサーバを利用し、ユーザーがみるポ
イントのデータを適宜配信する仕組み
一般的に、ストリーミングサーバが必要
代表的なサーバ：
Flash Media (Streaming) Server
Red5 (Open Source Streaming Server)

5. 動画ファイルのしくみ
 コンテナー
FLV, MP4,AVI,WebMはコンテナーと呼ばれ、映像ソース、音声ソース、
字幕ソースなどをいれこむ箱。
さまざまな種類のデータや標準的なデータ圧縮方法を使って圧縮した
データを保持できる、ファイルフォーマット。
 映像コーデック
H.263, H.264, Theora, On2VP6, VP8など
映像の圧縮形式。コーデックに対して、入れられるコンテナーは決
まっている
FLV => H.263(Sorenson Spark), H.264, On2VP6…
MP4 => MPEG-1、MPEG-2、MPEG-4(H.264)、MPEG-4 AVC
3gp => H.263 AMR
 音声コーデック
これも映像コーデックと同じ。
AAC、HE-AAC、AC-3、MP3、MP2、MP1など

6. 品質を決める要素
 ビットレート
動画/音声では、1秒間に使用するビット数を
表します。
MP3形式の場合、128Kでエンコードした時
128000bpsということになります。
この場合、1分間のファイルで937.5KB
 フレームレート
フレームレートは、単位時間あたり何度画面
が更新されるかを表す指標である。通常、1秒
あたりの数値で表し、fps(Frames Per Second、
フレームス パー セコンド)という単位で表す

7. ビットレートの話
 32 kbps - テレビ電話で話者を認識するために必要最低限な品質
 64 kbps - 3G-324M （MPEG-4 Visual + AMR）のテレビ電話の最高品質
 128 kbps - ワンセグの動画（H.264）の品質
 1.15 Mbps - ビデオCDの MPEG-1動画（映像のみ）の品質
 2 Mbps - VHS の品質と同程度とされる。YouTubeのHD画質モードの最高画質
 9.8 Mbps - DVD-Videoに記録できる最高画質
 12 Mbps - BS・110度CSデジタル放送の標準放送の品質
 15 Mbps - 地上デジタル放送のハイビジョン放送の品質
 23 Mbps - BS・110度CSデジタル放送のハイビジョン放送の品質
 24 Mbps - AVCHD（H.264 + AC-3）の最高品質
 54 Mbps - BD-Videoに記録できる最高品質（音声・字幕データ等含む）
 55 Mbps - MPEG-2 の最高品質
 118 Mbps - スーパーハイビジョンをMPEG-4 AVC/H.264形式で圧縮したときの品質
 1 Gbps - HVDに記録できる最高品質（音声・字幕データ等含む）
 24 Gbps - スーパーハイビジョンの動画非圧縮時の品質

8. 適したフォーマットとは？
 iPhone, iPadで見られる動画に変換する
コンテナ－：MP4
映像コーデック：H.264
音声コーデック：AAC
 Flash Playerで見られる動画に変換する
コンテナー：MP4, FLV
映像コーデック：H.264
音声コーデック：AAC, MP3

9. 変換ツール
 QuickTime Player Pro (4,000円ぐらい)
 Premiereなどの動画編集アプリで変換
 Open Sourceなアプリ
FFMPEG, Mencoder, MP4BOX(コンテナ変換)
OSX => MacPortsでインストール可能
Linux, Unix => yumなどのパッケージツールでイン
ストール可能
=>H.264に関しては、純粋なエンコードツールでは
なくて、x264でエンコード
 最新のコーデックに対応させたい場合は、ソースか
らコンパイルするのがおすすめ

10. HTMLで動画を再生する
 videoタグを書くことにより可能
<video src=“movie.mp4” controls=“controls”>
このブラウザではビデオは再生できません
</video>
 autoplay, control, height, width, preload,
src, loop, posterの属性を持つことが可
能

11. 少しユーザーに配慮したタグ
 以下で、MP4, OGGが再生可能
<video controls=“controls”>
<source src="movie.mp4">
<source src="movie.ogm">
このブラウザではビデオは再生できません
</video>

12. JavaScriptから操る
 基本的に、getElementById()で取得
 Method: play(), pause(), stop()
 Event: canplay, play, pause, ended,
timpupdate, seeked
 attachEvent, addEventListenerでEventをア
タッチ
 http://people.mozilla.com/~prouget/demos/ma
shup/video.xhtml
 http://www.apple.com/html5/showcase/video/
 http://people.mozilla.com/~prouget/demos/ma
shup/video.xhtml

13. 本格的にHTML5でビデオ解
析
video-analytics.jp