Your SlideShare is downloading. ×
  • Like
HTML5ビデオ導入編
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5ビデオ導入編

  • 9,628 views
Published

HTML5ビデオ導入編

HTML5ビデオ導入編

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,628
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
31
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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