Video要素

HTML5 video要素とは

HTML5で導入された`video`要素は、ウェブページに動画コンテンツを埋め込むための要素です。以前はプラグインなどを必要としていた動画再生を、HTMLのみで実現可能にしました。これにより、ウェブサイトにおける動画コンテンツの利用が大幅に拡大しました。

video要素の基本的な使い方

`video`要素は、以下のように記述します。

html



`src`属性：動画ファイルのURLを指定します。
`controls`属性：動画の再生、一時停止、音量調整などのコントロールを表示します。
`width`属性と`height`属性：動画の表示サイズを指定します。

複数ソースへの対応

ブラウザによって対応している動画フォーマットが異なるため、複数のソースを指定することができます。

html



`source`要素を用いて、複数の動画ファイルを指定し、ブラウザが対応しているフォーマットの動画を再生します。`type`属性には、動画のMIMEタイプを指定します。もしどの動画フォーマットにも対応していない場合、代替テキストが表示されます。

ビデオコーデックのサポート状況

HTML5の`video`要素は、様々な動画コーデックに対応していますが、ブラウザによってサポート状況が異なります。主要なブラウザの開発元間では、どのコーデックを標準としてサポートするかについて意見が分かれています。

H.264: MicrosoftやAppleが支持しており、広く利用されているコーデックです。しかし、特許問題があるため、完全にオープンな技術ではありません。
WebM (VP8/VP9): Googleが開発したオープンなコーデックで、特許に関する懸念が少ないとされています。Mozilla FoundationやOpera Softwareも支持しています。
Theora: オープンソースのコーデックで、Mozilla Foundationなどが支持していましたが、現在はあまり使用されていません。

多くのブラウザは、OSに搭載されているマルチメディアフレームワークを利用して動画を再生しています。そのため、ブラウザがサポートするコーデックは、OSやサードパーティ製のコーデックに依存する場合があります。

MIMEタイプ

動画ファイルのフォーマットを識別するために、MIMEタイプが用いられます。MIMEタイプは、ブラウザがどのマルチメディアフレームワークを使用するかを決定する際にも利用されます。例えば、MP4ファイルのMIMEタイプは`video/mp4`、WebMファイルのMIMEタイプは`video/webm`となります。

ブラウザとマルチメディアフレームワーク

ブラウザの多くは、動画のデコードと表示に、マルチメディアフレームワークを利用しています。

Mozilla FirefoxとOpera: OSから独立したデコードライブラリを内蔵しています。
Internet ExplorerとSafari: それぞれのOS（WindowsとmacOS）が提供するフレームワーク（Media FoundationとQuickTime）を利用します。
Konqueror: Windows上ではInternet Explorerと、macOS上ではSafariと同じフォーマットに対応します。

ブラウザがサポートするフォーマットは、ベンダーが提供するライブラリ（Media Foundation、QuickTime、GStreamer、Phononなど）にも左右されます。したがって、ウェブ開発者は、様々な環境で動画が正しく表示されるように、複数のフォーマットを用意する必要がある場合があります。

まとめ

HTML5の`video`要素は、ウェブページでの動画表示を容易にしました。しかし、ブラウザ間でのコーデックサポートの違いや、OSおよびサードパーティのコーデックへの依存があるため、ウェブ開発者は注意が必要です。複数のフォーマットを用意し、MIMEタイプを正しく指定することで、より多くのユーザーに動画コンテンツを届けることができます。

参考情報

4.7.6 The video element - HTML5 - W3C
https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element

もう一度検索