はじめに
video タグは、HTML5 の機能の中でも特に注目されているものの 1 つです。video タグは、メディアでは Flash の代替として説明されることが多いのですが、実際には video タグは Flash を超えています。video タグが他の一般的な HTML タグに加わったのは最近ですが、その機能性および各ブラウザにおけるサポートは驚くべき速度で拡大しています。このチュートリアルで説明しますが、主な利点は、CSS や JavaScript といったウェブ開発スタックの他のレイヤや他の HTML タグと自然に統合できることです。
このチュートリアルでは、video タグの概要について説明し、他の HTML5 機能（<canvas> など）とのさまざまな統合例を紹介します。
1. マークアップ
HTML の動画をサイトで機能させるには、次の行で十分です。
<video> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> </video>
このスニペットでは、<source> タグを使用します。このタグを使用すると、ユーザーのブラウザがサポートしていない場合に備えて、複数の形式を予備のタイプとして含めることができます。詳細については、次の項で説明します。
image タグとほぼ同じ構文である単独の video フォーマットを使用することもできます。近い将来、すべてのブラウザが 1 つの共通動画形式をサポートするようになったら、この構文が最もよく使用されるようになるでしょう。
<video src="movie.webm"></video>
ここでは、現時点で普及度の高い前者の例を扱います。最も重要なことは、サーバーが Content-Type ヘッダーに正しい MIME タイプを指定して動画ファイルを提供することです。そうしないと、サイトのローカル コピーでは動作していた動画が正しく動作しない可能性があります。Apache の httpd.conf では、次の行を追加するだけで十分です。
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
アプリケーションが Google App Engine アプリケーションで提供されている場合、次のような行（形式ごとに 1 つ）を app.yaml に追加する必要があります。
- url: /(.*\.ogv) static_files: videos_folder/\1 mime_type: video/ogg upload: videos_folder/(.*\.ogv)
クライアント側のパフォーマンスを向上させるために、複数の形式を扱うときは必ず source タグに type 属性を指定します。こうすることで、ブラウザはダウンロードと再生が可能な形式を判断できます。言い換えると、サイトのパフォーマンスを向上させるため、再生できない形式はダウンロードされません。
2. 動画の形式
1 つの動画形式を、エンコードされた動画ストリームとオーディオ ストリームを含む zip ファイルと考えてみましょう。ウェブの場合に考慮する必要がある 3 つの形式は、webm、mp4、ogv です。
- .mp4 = H.264 + AAC
- .ogg/.ogv = Theora + Vorbis
- .webm = VP8 + Vorbis
video タグは、頼もしい速度で進化しています。ほんの 1 年前には、安定バージョンで video タグをサポートしていたブラウザは Safari のみでした。現在では、まもなくリリースされる IE9 を含め、すべての最新ブラウザが HTML5 の動画をサポートしています。コーデックに関しては、Firefox、Chrome、Opera は共通の動画形式として .webm のサポートを追加することに WebM Project で合意しました。Internet Explorer もサポートを予定していますが、コーデックがコンピュータにインストールされている場合に限ります（将来的にはこれを要件にしないことを望んでいます）。
注意: 執筆の時点では、Safari は .webm 形式をサポートしていません。
前述した 3 つの形式のうち、お使いのブラウザで実際にレンダリングできるのは 1 つか 2 つのみであるということを、ここに示すサンプルで確認してみてください（3 つとも確認できたらラッキーです）。
執筆の時点（2010 年 8 月）で、このスニペットで使用している形式の組み合わせは最も安定したものなので、すべてのブラウザで動画を表示できます。
<video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> Video tag not supported. Download the video <a href="movie.webm">here</a>. <video>
注意: iPad のバグのため、動画を iPad に読み込む場合は最初のオプションとして .mp4 を設定する必要があります。これは、バグが修正されるまでの措置です。
前述のように、ほぼすべてのブラウザ ベンダーが共通の動画形式をサポートすることに合意しました。そのため、今から 1 年も経たずに、このようなコードはウェブ全体で最もよく使用されるようになる可能性が高いでしょう。
<video> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> Video tag not supported. Download the video <a href="movie.webm">here</a>. <video>
.mp4 形式の使用に関する主な懸案事項の 1 つは、ビデオ コーデック（h.264）はオープン コーデックではなく、使用するために企業が支払う必要があるライセンス料金が理解できないほど複雑なことです。この形式の詳細については、この動画の章を参照してください。
もう 1 つ、.mp4 形式に関しても問題があり、動画のエンコードに使用するプロファイルによっては type 属性を他の形式よりも詳細にする必要があります。最も一般的なものは「avc1.42E01E, mp4a.40.2」ですが、念のため、プロファイル リストも確認してください。
Microsoft は、まもなくリリースされるバージョンの IE （IE9）で他の HTML5 要素と共に video タグをサポートするとアナウンスしましたが、IE で新しいバージョンに移行するユーザーの割合は他の主要ブラウザに比べて低めです。ここから次の項に示す疑問が生まれます。
3. video タグをサポートしない現在のバージョンの IE における動作はどうなるでしょうか。
Flash のフォールバック
フォールバックのケースとして Flash を使用することもできます。使用する動画の形式によっては、Flash プレイヤーに対応している形式に再エンコードする必要があります。Adobe が Flash プレイヤーで webm 形式をサポートするように取り組んでいるという情報は期待を抱かせますが、スケジュールはまだ明らかになっていません。Chrome Frame プラグインと比較した場合、この解決策の最も大きな欠点は、この Flash プレイヤーは、video タグ用に今まで作成したカスタム UI や拡張機能の劣化バージョンになるであろうということです。この技術の詳細については、Quick Guide to Implementing the HTML5 Audio チュートリアルを参照してください。
4. 動画のエンコード
既存の動画を前述した形式にエンコードする必要がある場合、Windows でも Mac でも Miro Converter を使用すると、簡単に目的の形式にエンコードできます。このプログラムでは多くの設定を微調整することはできませんが、このチュートリアルで使用している 3 つの形式を含め、ウェブにおける最も一般的な出力形式に対応しています。実質的に、このソフトウェアは ffmpeg と ffmpeg2theora のラッパーです。これらのツールは Windows、Mac、Linux に対応し、コマンド ラインから使用できます。また、より多くのパラメータを指定できます。このツールの詳細については、divintohtml5.org を参照してください。
5. お楽しみ
冒頭部で説明したように、HTML5 ファミリに加わった video タグの主な利点は、ウェブ開発スタックの他のレイヤとの統合です。次の例では、video タグを使用して実行できることの概要を紹介します。
5.1. video + 他の HTML
動画プレイヤーで、すべての一般的な HTML 属性を使用できるようになります。たとえば、次のスニペットは tabindex を使用してプレイヤーのキーボードをアクセス可能にしています。video タグに使用できる新しい属性があります。この属性は audio タグとも共通であり、loop や autoplay など、名前が示す機能を持っています。poster 属性には、動画が最初に読み込まれるとき、および最終的に表示する画像を指定します。controls は、カスタム コントロールを構築するのではなく、ブラウザで自動的にレンダリングすることを示すために使用されます。preload 属性もあります。これを使用すると、ページが読み込まれるとすぐに、動画の再生が開始されなくてもバックグラウンドで動画をダウンロードできます。
<video poster="star.png" autoplay loop controls tabindex="0"> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
ブラウザのネイティブ要素として video タグが完全に統合されると、過去のサードパーティ製の組み込みプレイヤーで経験したいくつかの問題は解消します。たとえば、プレイヤーにドロップダウン メニューや iframe が重なる問題や、video を囲む他の HTML 要素が動的にサイズ変更されたときにレイアウト動作が正しく行われない問題などです。
動画が組み込みの外部オブジェクトとして扱われないため、ユーザー エクスペリエンスに関係する利点が他にもあります。たとえば、フォーカスがプレイヤーにある場合でも、ページのスクロールやキーボードによるキー入力などの操作も問題なく機能します。
注意: HTML5 のコンテキストで XHTML 構文を使用できるようにポリグロット ドキュメントを作成する場合、コードの属性は次のようにします。
<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls" tabindex="0"> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
5.2. video + JS
video タグには、JS コードから動画を細かく制御できる属性とメソッドがそろっています。これらについては、次の例でリアルタイムに確認できます。
他の HTML 要素と同様、video タグには、ドラッグ イベント、マウス イベント、フォーカス イベントなどの一般的なイベントをアタッチできます。ただし、video 要素には、動画の再生、一時停止、終了を検出（および制御）する一連の新しいイベントがあります。動画リソースの読み込みでは、問題が発生するさまざまな可能性が考えられるため、ネットワーク レベル（loadstart、progress、suspend、abort、error、emptied、stalled）とバッファ レベル（loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough）の両方に、読み込みプロセスを微調整するためのイベントが数多く用意されています。
最もシンプルなレベルでは、canplay イベントをアタッチすることにより動画に対して何かの処理を開始できます。
video.addEventListener('canplay', function(e) {
this.volume = 0.4;
this.currentTime = 10;
this.play();
}, false);
現在、いくつかのカスタム プレイヤー コントロールをインターネットから入手できます。次の例では、いくつかの要素を使用して 2 つの動画を同時に制御し、playbackRate 属性を使用して早送り効果もエミュレートしています。動画間の音量を切り替えるには、スライダを使用します。
5.3. video + CSS
お気付きかもしれませんが、video タグは DOM の世界の優等生なので、従来型の CSS を使用してスタイルを設定できます（ボーダー、不透明度など）。優れているのは、反射、マスク、グラデーション、変換、遷移、アニメーションなどの最新の CSS3 プロパティを使用してスタイルを設定することもできる点です。
次の動画にマウスを移動して、アクションをいくつか見てみましょう。
#video-css.enhanced {
border: 1px solid white;
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
-moz-transform: translate(0, 10px); /* FF3.5+ */
-o-transform: translate(0, 10px); /* Opera 10.5 */
-webkit-transform: translate(0, 10px); /* Saf3.1+, Chrome */
}
5.4. video + canvas
canvas もまた、video タグと組み合わせて使用することで多くの可能性が開ける HTML5 要素です。
次の例では、<canvas> 要素の 2 つの機能を利用して画像のインポートとエクスポートを行っています。1 つ目は drawImage メソッドで、image 要素、別の canvas 要素、<video> 要素という 3 種類のソースから画像をインポートできます。このメソッドを実行するたびに、動画の現在のフレームがインポートされ、キャンバスにレンダリングされます。
ここで使用している <canvas> タグの 2 つ目の機能は、キャンバスのコンテンツを画像にエクスポートできる toDataURL メソッドです。次の動画の再生をクリックして、1.5 秒ごとに動画から画像が作成される様子を確認してください。ここでインポート/エクスポートするために使用しているキャンバスは、実際は非表示です。
次のコードでは、1.5 秒ごとに実行される間隔を作成し、video 要素をソースとして使用する drawImage メソッドをそこに含めているだけであることがわかります。
video_dom.addEventListener('play', function() {
video_dom.width = canvas_draw.width = video_dom.offsetWidth;
video_dom.height = canvas_draw.height = video_dom.offsetHeight;
var ctx_draw = canvas_draw.getContext('2d');
draw_interval = setInterval(function() {
// import the image from the video
ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
// export the image from the canvas
var img = new Image();
img.src = canvas_draw.toDataURL('image/png');
img.width = 40;
frames.appendChild(img);
}, 1500)
}, false);
次の例では、もう 1 歩先に進みます。動画から画像をインポートしてレンダリングする頻度を高めると、同じ動画フレームをキャンバス内でエミュレートできます。これにより、キャンバス内であらゆる種類の高度な変換を実行し、それを動画で行っているように見せることができます。
左側には、元の動画再生を表示できます。中間には、33 ミリ秒ごとに画像をインポートするために使用しているキャンバスがあります。右側には、2 つ目のキャンバスがあり、1 つ目のキャンバスから画像をインポートすると同時にすべての変換を実行しています。2 つのキャンバスを使用しているのは、単に、1 つのキャンバスを使用して画像をインポートし、同時に変換するよりもはるかにパフォーマンスが高いためです。
画像をインポートする同じ技術を WebGL にも適用できます。WebGL を使用すると、たとえば動画のフレームをインポートし、回転する 3D 立方体にレンダリングすることができます。このような実装の詳細については、MDC ウェブサイトを参照してください。
5.5. video + SVG
SVG には、ベクトル画像をプログラムでレンダリングし、操作する方法が用意されていますが、SVG フィルタ効果など、その他の機能もあります。これらのフィルタを使用すると、特定の DOM 要素を対象にして、ぼかし、合成、タイルなど、付属の効果をそのまま適用できます。執筆時点（2010 年 8 月）で、Firefox 4 と IE9 はインライン SVG をサポートしており、HTML と CSS で video 要素を対象にすることができます（この例では、JavaScript と canvas を使用することにより、インライン SVG に未対応のブラウザでも機能するようにしています）。
<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myblur">
<feGaussianBlur stdDeviation="1" />
</filter>
</defs>
</svg>
<style>
video { filter:url(#myblur); border: 2px solid red; }
</style>
ここをクリックしてぼかしフィルタを切り替える