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