トップページ  > HTML5  > <video>

★HTML5タグリファレンス

<video> …… 動画を再生するHTML5から追加
Internet Explorer9 Firefox3.5Firefox4 Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera10

<video>タグは、動画を再生する際に使用します。 <video>タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになります。 感覚的には<img>タグで画像を扱うような感じです。

動画ファイルの指定には、<video>タグのsrc属性か、<video>~</video>の中で<source>タグを使用します。 <source>タグを使う方法では、フォーマットの異なる複数の動画データを指定して、ブラウザに動画の再生候補を提示することができます。 ブラウザは、記述された順に再生可能なデータを利用するので、より多くの環境で動画を視聴してもらえる可能性が高くなります。

<video>~</video>の中には、 <video>タグがサポートされていない環境で表示させるメッセージを記述することができます。

<video>
<source src="sample.mp4">
<source src="sample.ogv">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

<video>タグには、動画再生の詳細を指定する以下のような属性があります。

autoplay属性で動画を自動再生する

autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。

<video src="sample.ogv" autoplay></video>

preload属性で動画をあらかじめ読み込む

preload属性を指定すると、ウェブページを読み込んだ時点で動画を裏側で読み込みます。 初期値はpreload="auto"で、一般的なブラウザではpreload属性を指定しなくても動画はあらかじめ読み込まれます。

preload="metadata"を指定すると、動画全体ではなく、 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

もし、ユーザーが動画をあまり必要としていないことが想定される場合や、ウェブサーバに余分な負担を掛けたくない場合には、preload="none"を指定すると良いでしょう。

<video src="sample.ogv" preload="none"></video>

controls属性でインターフェースを表示する

controls属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、動画を利用しやすくするインターフェースを、ブラウザが自動で表示することになっています。

<video src="sample.ogv" controls></video>

poster属性で動画のヒントとなる画像を表示する

<video>タグのposter属性は、ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。 poster属性で指定する画像は、ユーザーにその動画の内容がどのようなものかを知らせるヒントとなるものが適しています。 例えば、動画の開始画面の画像などです。

<video src="sample.ogv" poster="firstframe.jpg"></video>

■HTML4.01からHTML5へのバージョンアップによる変更点

video要素は、HTML5から新たに追加された要素です。

■属性

src属性
動画ファイルを指定する
poster属性
動画のヒントとなる画像を表示する
preload属性
動画をあらかじめ読み込む(auto、metadata、none)
autoplay属性
動画を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する
width属性
幅を指定する
height属性
高さを指定する

現在、<video>タグをサポートしているブラウザは、 Firefox、Google Chrome、Safari、Operaの新しいバージョンなどですが、 これらのブラウザ間では、サポートされている動画規格が統一されていません。 どの動画規格がHTML5にふさわしいかについての検討はされていますが、推奨される標準規格はまだ未定のままです。

今後、HTML5で標準採用される可能性のある動画規格としては、 Firefox・Google ChromeがサポートするOgg Theora、 Safari・Google ChromeがサポートするH.264、 Google Chrome・OperaがサポートするWebMなどが挙げられるでしょうが、 どの規格も技術特許への懸念や、ブラウザベンダー各社の自社サービスとの相性などの問題から、 合意を得ることはなかなか難しいようです。 場合によっては、標準規格が決められないまま、各ブラウザベンダーに任せられることになるかもしれません。

以下のサンプルでは、<source>タグで3種類の動画形式を指定しています。 mp4形式はGoogle Chrome・Safari向け、ogv形式はFirefox・Opera向け、webm形式はGoogle Chrome・Opera向けです。

■使用例

HTMLソース

<p>HTML5のvideoタグによる動画再生</p>

<video controls autoplay poster="firstframe.jpg" width="320" height="240">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

↓↓↓

※メモ: サーバー側の設定にもよるでしょうが、 ogv形式の動画、mp4形式の動画、ogg形式の音声をブラウザで再生させるには、 .htaccess に以下の記述を追加する必要があるかもしれません。

AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

■関連項目

▲ページ先頭へ
トップページ  > HTML5  > <video>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ