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向け

 

More from my site