私たちが一緒に思い出に浸ることができるように、ビデオをウェブページに埋め込む方法の例を紹介します：
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
このような構文はもちろん美しいとは言えません。
しかし、見栄えの観点を一旦脇に置いても、この構文は単純に誤りやすく、複雑すぎます。HTML5では、ビデオをはるかに簡単に埋め込むことができます。このためには、video要素を使用します。
こちらが、video要素をどのように埋め込むかの例です：
<video src="video.ogv" width="300" height="200"> お使いのブラウザはHTML5に対応していません </video>
これが最も簡単な形式です。しかし、この構文形式で重要なのは3つの属性です。 src は埋め込むビデオを指定します。ここでパスが正しいかどうかに注意してください。 width と height の両方がビデオの幅と高さを決定します。どちらかの値が指定されていない場合、ビデオは元のサイズで表示されます。両方の値のうち1つだけを記入した場合、ブラウザが残りの値を自動的に計算します。 autoplay 属性は、ページの読み込み後にビデオを自動的に再生するようブラウザに指示します。通常はこの属性を設定しない方がよいです。モバイルデバイスのユーザーや帯域幅が低いユーザーは、特に自動再生を好まないことが多いからです。
もう1つの興味深い属性は controls です。これを使うと、ブラウザによって再生や音量のネイティブコントロールが表示されます。
<video src="video.ogv" width="300" height="200" controls> お使いのブラウザはHTML5に対応していません </video>
ブラウザ上での結果は以下の通りです：
表示されているバーを使って、ビデオを一時停止したり再生したり、音量を調整したりできます。
poster 属性を使用して、ビデオの開始前に表示される画像を指定できます。
<video src="video.ogv" width="300" height="200" poster="video.gif"> お使いのブラウザはHTML5に対応していません </video>
ここでも、画像が実際に表示されるように、正しいパスを指定することに注意してください。
autoplay 属性の使用には注意が必要です。なぜなら、この属性はビデオを自動再生するように指定するからです。
<video src="video.ogv" width="300" height="200" autoplay> お使いのブラウザはHTML5に対応していません </video>
トラフィックに関しては、preload 属性が興味深いかもしれません。この属性はプリロードの動作を制御します。属性には次の値が指定できます：
• auto – ブラウザはファイル全体をプリロードできます。
• none – ファイルのプリロードは必要ありません。
• metadata – ファイルのメタデータをプリロードできます。
preload 属性がない場合、ブラウザのデフォルト設定が適用されます。
ビデオとコーデック
ビデオをウェブページに埋め込んだり再生したりする際には、さまざまなコーデックの問題に必ず遭遇することになります。これらのコーデックにより、ビデオを効率的に圧縮および解凍することができます。問題は、ブラウザメーカーが今日まで共通のコーデック形式に合意できていないということです。HTML5（そして最終的にはあなた）の場合、ビデオやオーディオファイルのための一貫したコーデックが存在しないことを意味します。
ビデオについては、Ogg と MP4 という2つの形式が今や定着しています。したがって、これら2つのフォーマットでビデオを提供するときは、ほとんどの場合安心です。これらの2つの形式にビデオ要素に2つの source 要素を割り当てます。
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
したがって、ビデオソースはvideo要素内で指定されていません。代わりに、そこでは表示に関する一般的な情報のみが提供されます。表示するビデオは、source要素を使用して指定します。 src属性に対して対応するビデオを割り当てます。 typeの後には、ビデオの種類またはビデオの形式が指定されます。複数のsource要素が指定されている場合、ブラウザは常に「適合する」最初のビデオを再生します。「適合する」とは何かについては、次に説明します。
しかし、どのブラウザが実際にどの形式をサポートしているのでしょうか？ この質問の答えは、次の表から得られます。
| ブラウザ | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | 9以降 | |
| Mozilla Firefox | はい | |
| Google Chrome | はい | はい |
| Opera | はい | |
| Safari | はい | |
| iPhone | はい | |
| Android | はい |
この表はジレンマを明らかにします。形式の解釈はほぼ均等に各ブラウザに分散されています。そのため、ほとんどの場合、両方の形式でビデオを指定する必要があります。media属性は、source要素にのみ割り当てられることに注意してください。 この属性を使用すると、ビデオがどのメディアタイプに適しているかを明示的に指定できます。 特定のエンドデバイス用にビデオを指定するには、srcにmedia属性を割り当てる必要があります。 このmedia属性を使用すると、希望のメディアタイプを指定できます。source要素の可能な使用法は次のようになります：
<video width="400" height="300">
<!-- モバイルデバイス用 -->
<source src="video_mobil.ogg" media="handheld" />
<!—その他すべてのデバイス用 -->
<source src="video_normal.ogg" media="all" />
</video>
このように、media属性を使用して、デバイスがモバイルデバイスかどうかを確認します。 その場合、サイズの小さいビデオが再生されます。 他のデバイスの場合、all値が利用されます。
ビデオを安全に組み込む
HTML5はまだすべてのブラウザでサポートされているわけではありません。 もちろん、video要素にも同じことが言えます。 解決策として、さまざまな埋め込み技術を組み合わせることがあります。 従来のobjectおよびembed要素とvideoを組み合わせることができます。 それは次のようになります：
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
このように組み込まれたビデオは、ほとんどのブラウザで再生できるはずです。 video要素を認識するブラウザはその情報を使用し、他のブラウザはobjectまたはembed要素の情報を使用します。
