HTML5手習い

動画圧縮の基礎知識

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
動画圧縮フォーマットの基本構造であるコンテナとコーデックについてや、ブラウザごとに再生できるコンテナ・コーデックが異なることを学びます。また、play,pauseメソッドを使用して動画をの再生制御を行う方法についても説明します。
講師:
08:04

字幕

このレッスンでは動画圧縮フォーマットの 基本知識と HTML から動画を 再生する方法について学びます 動画圧縮のフォーマットは大きく分けて 二つの部分に分けられます コンテナとコーデックです コンテナとは動画に格納されるデータの 入れ物のことです コンテナにはストリームと呼ばれるビデオや オーディオのデータが 時系列に沿って並んだものが 一つ以上含まれています 例えば一つのコンテナに ビデオのストリーム一つと 日本語の音声のストリームが一つ 英語の音声のストリームが一つ 計三つのストリームが入っている ということがあります それぞれのストリームはそのメディアに適した 圧縮方法で圧縮された形で格納されています その圧縮方式のことをコーデックと呼びます コーデックとはコーダーとデコーダーを くっつけて略したもので それぞれ符号化する物 復号する物と いう意味です コンテナとコーデックの組み合わせには 様々なものがありますが 例えば代表的なものの一つとして コンテナとして MP4 コンテナ ビデオのコーデックとして H.264 オーディオのコーデックとして AAC という 組み合わせが挙げられます Web ブラウザ毎に使用できるコンテナと コーデックの組み合わせは決まっています 例えば Safari では MP4 コンテナと H.264 AAC コーデックの 組み合わせは使用できますが Firefox ではそれは使用できません 逆に Firefox では WebM コンテナに VP8 Vorbis コーデックを組み合わせた動画圧縮は 使用できますが Safari ではそれは使用できません その為 クロスブラウザでの 動画再生に対応するためには 同じ動画を複数の異なる 動画フォーマットで圧縮しておいて それぞれのファイルをサーバー上に 配置しておく必要があります 動画圧縮はなぜ必要なのでしょうか それは動画を圧縮しないでそのままの 画像データとしてファイルに保存した場合に ファイルの容量がどの位になるのかを 計算してみるとすぐに分かります 例えば 1280 pixcel × 780 pixcel の動画を 秒間 30 コマで 180 秒間の長さで ファイル化したいとします 各ピクセルはそれぞれ r g b について 8 bit ずつで 1 ピクセル 3 バイトの容量があるとします するとこれらをすべて掛け合わせると 約 14 GB というとんでもない数字に なることが分かります しかしながら これを現代的な動画圧縮の コーデックで圧縮すれば せいぜい 100 MB の容量にまで圧縮できます 動画圧縮ではビデオやオーディオといった メディアの特性に考慮したー 圧縮アルゴリズムを利用している為 チップなどで利用されているような 一般的な圧縮フォーマットよりも 高い圧縮率を出すことができます ビデオのストリームではこのように 時系列にそった沢山の画像が それぞれの timestamp と 紐付けられた形で格納されています ビデオのデコーダーを使えば これらの各画像をアプリケーションから 利用可能な bitmap の形で 取り出すことが可能です HTML で動画を再生する為には video タグを使用しますが その video タグに対応する dom の データ型は HTMLMediaElement です HTMLMediaElement は play pause という メソッド を備えており これらのメソッドを使用することによって 動画の再生 停止を 明示的に行うことが可能です では JavaScript から動画を再生してみましょう まずアセットの sample.mp4 というファイルと template.html というファイルを用意して下さい テキストエディタで template.html と Google Chrome を開いて下さい 開くとこのような画面になります では動画を再生する為に まずは video タグを記述しましょう テキストエディタで body タグの中の h1 要素の下辺りに video と記述します そして後から JavaScript で参照したいので id をふっておきましょう id は video としておきます そして video を閉じます そして video タグの中には source タグで そのビデオのビデオファイルを指定します source タグの src 属性に動画ファイルの ファイル名を書きます そして type 属性に動画の ファイルフォーマットを記述します 今回は mp4 ファイルを使用するので video/mp4 と記述して タグを閉じます video タグの中の source タグは 複数記述することができます 例えば mp4 で圧縮されたファイルと WebM で圧縮された ファイルを 複数用意しておいて このように source タグを 複数記述することによって Safari と Firefox の両対応と いったことができます 今回は動画ファイルは一つしか用意して おりませんので この部分は削除しましょう そしてブラウザをリロードします 動画ファイルがこのままでは大きすぎるので CSS でサイズを少し小さくしましょう width を 500 pixel 程度に指定します すると小さくなりました それではこの状態で JavaScript コンソールを開きます Mac の方は Command+Option+I Windows の方は Ctrl+Shift+I です そして ビデオの dom を取得します HTMLMediaElement です video は document の getElementById で video と指定します すると video 要素が取得できました このビデオのオブジェクトに対して play というメソッドを呼び出すと このように動画が再生開始されました そして pause を呼び出すと 動画の再生が停止します 因みに video 要素には 画像と同様に CSS の filter を かけることができますので 例えば video のこの CSS の部分に webkit-filter の blur というように filter をかけてリロードすると 再度 dom を取得して再生します このように filter をかけてしまったので 再生されているかどうか分かり辛いのですが filter がかかったまま このように動画が再生しています このレッスンでは 動画圧縮フォーマットの基本と JavaScript から動画を再生する 方法について説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。