※この記事は最終更新日から2年以上経過しています。内容が古い可能性があります。
About Video tag
最近、TOPに動画入れたり、動画背景にしたりして使いたいクライアントさんがちょこちょこあるので、Videoタグについて覚書。
すぐ忘れちゃうから・・・ね。。
Videoタグの使い方と属性など
videoタグの書式
- <video>～</video>
videoタグに対応しているブラウザ
- Internet Explorer 9：○
- Firefox 9.0：○
- Opera 11.6：○
- Chrome 16.0：○
- Safari 5.1：○
videoタグの属性一覧
| 属性 | 内容 |
|---|---|
| src | 再生するビデオファイルのパスを指定。 |
| preload | ページロード（読み込み）時に、ビデオデータをあらかじめ読み込むかどうかの指定。 指定できる値は次の通り。 「none」：なし 「metadata」：メタデータのみ読み込む 「auto」：自動 なお、値にブランクを指定した場合（preload=””）、「auto」と同様。 |
| autoplay | ビデオデータ読み込み後に自動再生を行うように指定。 この属性を有効にするには 「autoplay」 「autoplay=”autoplay”」 「autoplay=””」 のいずれかを指定。 |
| mediagroup | グループ名を指定。複数のメディアを連携させるときに使用。 |
| loop | ループ（繰り返し）再生を行うように指定。 この属性を有効にするには 「loop」 「loop=”loop”」 「loop=””」 のいずれかを指定。 |
| muted | ミュート（消音）再生を行うように指定。 この属性を有効にするには 「muted」 「muted=”muted”」 「muted=””」 のいずれかを指定。 |
| controls | 音声再生用のコントロールが表示されるように指定。 この属性を有効にするには 「controls」 「controls=”controls”」 「controls=””」 のいずれかを指定。 |
| poster | ビデオファイルが利用できない場合、表示させるイメージファイルのパスを指定。 |
| height | 再生エリアの高さを指定。 指定しない場合、デフォルト値の「150」となる。 |
| width | 再生エリアの幅を指定。 指定しない場合、デフォルト値の「300」となる。 |
videoタグについて
<video>タグは、ビデオを再生するための要素。
この要素を使用することで、プラグインを使用することなく、ビデオの再生を行うことがでる。
「controls」属性を指定することで、一時停止/再生などの操作を行うコントロールを表示させることも可能。
再生するビデオファイルは「src」属性で指定可能、複数指定する場合は<source>要素を使用して指定。
<video>～</video>の中には、<video>をサポートしていないブラウザで表示する代替コンテンツを入れる。
ブラウザによって再生可能なビデオファイルのフォーマットが異なるので注意。
1種類のビデオを、より多くのブラウザに対応させたい場合は、<source>要素で複数のフォーマットのビデオファイルを指定して対応。
videoタグのサンプル
<section> <h1 class="sample">sample_video</h1> <video width="320" height="240" poster="poster.jpg" autoplay controls loop muted> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> </video> </section>
※mp4形式はGoogle Chrome・Safari向け、ogv形式はFirefox・Opera向け、webm形式はGoogle Chrome・Opera向け
