Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5ビデオ導入編

11,266 views

Published on

HTML5ビデオ導入編

Published in: Technology
  • Be the first to comment

HTML5ビデオ導入編

  1. 1. HTML5ビデオ導入編
  2. 2. インターネット動画基礎知識  現状 YouTube、ニコニコ動画などでも広く利用されているFLV形 式が一般的  iPhone, iPadなどのSmartPhoneの登場 FlashPlayerに対応していないので、必然的に動画を再生す るには、HTML5配信をしなければならない  Android携帯はFlashPlayer10.1が搭載され始めているが、 FLVの再生をソフトウェアレベルで行っているため、電池の 減りが早くなるなどの問題点もあり Flash, HTML5のハイブリット配信が必要
  3. 3. 動画配信CMS各種 無償で利用するなら、YouTubeはすでにFlashPlayer, HTML5に対応しており デバイスによって表示されるビデオ自動的に選択される ビジネス利用であれば、 BrightCove、Ooyala、Kalturaなどの動画CMSを利用できる 大体、10,000円ぐらいから お金がかかるので 自前のサーバでやれる方法を探してみましょう
  4. 4. 動画配信の仕組みを理解する  プログレッシブ HTTPレスポンスとして動画データをクライアント に送り、ある程度バッファがたまったら再生する仕 組み 特別な仕組みが必要ないので、動画データをサーバ においておくだけで配信ができる  ストリーミング ストリーミングサーバを利用し、ユーザーがみるポ イントのデータを適宜配信する仕組み 一般的に、ストリーミングサーバが必要 代表的なサーバ: Flash Media (Streaming) Server Red5 (Open Source Streaming Server)
  5. 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. 6. 品質を決める要素  ビットレート 動画/音声では、1秒間に使用するビット数を 表します。 MP3形式の場合、128Kでエンコードした時 128000bpsということになります。 この場合、1分間のファイルで937.5KB  フレームレート フレームレートは、単位時間あたり何度画面 が更新されるかを表す指標である。通常、1秒 あたりの数値で表し、fps(Frames Per Second、 フレームス パー セコンド)という単位で表す
  7. 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. 8. 適したフォーマットとは?  iPhone, iPadで見られる動画に変換する コンテナ-:MP4 映像コーデック:H.264 音声コーデック:AAC  Flash Playerで見られる動画に変換する コンテナー:MP4, FLV 映像コーデック:H.264 音声コーデック:AAC, MP3
  9. 9. 変換ツール  QuickTime Player Pro (4,000円ぐらい)  Premiereなどの動画編集アプリで変換  Open Sourceなアプリ FFMPEG, Mencoder, MP4BOX(コンテナ変換) OSX => MacPortsでインストール可能 Linux, Unix => yumなどのパッケージツールでイン ストール可能 =>H.264に関しては、純粋なエンコードツールでは なくて、x264でエンコード  最新のコーデックに対応させたい場合は、ソースか らコンパイルするのがおすすめ
  10. 10. HTMLで動画を再生する  videoタグを書くことにより可能 <video src=“movie.mp4” controls=“controls”> このブラウザではビデオは再生できません </video>  autoplay, control, height, width, preload, src, loop, posterの属性を持つことが可 能
  11. 11. 少しユーザーに配慮したタグ  以下で、MP4, OGGが再生可能 <video controls=“controls”> <source src="movie.mp4"> <source src="movie.ogm"> このブラウザではビデオは再生できません </video>
  12. 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. 13. 本格的にHTML5でビデオ解 析 video-analytics.jp

×