HTML5:タグだけで簡単に映像/音声コンテンツを埋め込む (サンプルあり)

ヘッダー画像

この記事について

HTML5 から追加された動画/音声フォーマット埋め込み用のタグ、video/audio タグについて実際のコードサンプルを見ながら覚えていこうというエントリーです。
2011/11/10 時点で指定できる各属性についても説明しています。
このエントリーには H.264 コーデックと Ogg/Theora コーデックのサンプル動画を使用しています。

なお、HTML5 は未だ各ブラウザで対応中の技術です。
お使いのブラウザで正しく表示されない可能性がございます。
推奨ブラウザは Google Chrome 15.0.874.120 です。

HTML5 とは?

11年ぶりのバージョンアップとなる HTML(HyperText Markup Language) の最新バージョンです。
HTML5 では各タグの意味強化や再定義がなされています。
これにより今までよりも文書構造を意識した HTML ソースがマークアップできるようになりました。
このように要素ごとの意味を考えて文書構造を構築することをセマンティック化といいます。
セマンティック化には、人間は元より検索エンジン等のロボットにも HTML ソースを理解しやすくなるというメリットがあります。

video/audio タグとは?

HTML5 で新たに実装された動画/映像コンテンツを埋め込むためのタグです。
これにより、HTML ソースを見た時に「ここは動画/音声コンテンツについて記述している部分だ」ということが一目で分かるようになりました。
もう一つの恩恵として flash 動画プレイヤーを埋め込むよりも記述が圧倒的に簡単になるということも挙げられます。
video 要素も audio 要素もメディア要素に含まれ、共通のメディア要素属性を指定することができます。

video タグで指定できる属性の紹介と使用例

最もシンプルな記述

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>"&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

とりあえず表示できればいいという最低限の記述です。
src 属性は必須の属性で、動画コンテンツへのパスを記述します。

この書き方はとても簡単ですが、ユーザーに動画を再生してもらう際に右クリックメニューから [再生] を選択してもらわなければならず大変不便です。
見た目的にも動画コンテンツなのか画像コンテンツなのかが分かりにくくなってしまいます。

動画のコントロールパネルを表示する

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span>&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

controls 属性を記述することで動画の再生位置を示すスライダー、ボリュームスライダー、再生・一時停止ボタンを含むコントローラーが表示されます。

複数形式の動画を指定する

&lt;<span style="color: #0066ff">video</span> <span style="color: #ff0000">controls</span>&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.mp4</span>" type="<span style="color: #ff6600">video/mp4</span>" /&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.ogv</span>" type="<span style="color: #ff6600">video/ogg</span>" /&gt;
&lt;/<span style="color: #0066ff">video</span>&gt;

source タグで複数個の動画を指定することでより多くの環境に対応することができます。
またこの場合、動画コンテンツへのパスを記述する src 属性は source タグ内にマークアップするようになります。
source タグには type 属性を設定することができます。

video タグに対応していないブラウザの場合にメッセージを表示する

お使いのブラウザは video タグに対応していません

&lt;<span style="color: #0066ff">video</span> <span style="color: #ff0000">controls</span>&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.mp4</span>" type="<span style="color: #ff6600">video/mp4</span>" /&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.ogv</span>" type="<span style="color: #ff6600">video/ogg</span>" /&gt;
  お使いのブラウザは video タグに対応していません
&lt;/<span style="color: #0066ff">video</span>&gt;

source タグと同じ階層に source タグ以外のタグによってメッセージを記述することで、動画コンテンツの形式に非対応のブラウザでアクセスした際の代替テキストとすることができます。

メッセージは文字色を変更したり、画像に置き換えたりすることもできます。
以下はメッセージの文字色を変更するサンプルです。

お使いのブラウザは video タグに対応していません

&lt;<span style="color: #0066ff">video</span> <span style="color: #ff0000">controls</span>&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.mp4</span>" type="<span style="color: #ff6600">video/mp4</span>" /&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.ogv</span>" type="<span style="color: #ff6600">video/ogg</span>" /&gt;
  &lt;p style="color: red"&gt;お使いのブラウザは video タグに対応していません&lt;/p&gt;
&lt;/<span style="color: #0066ff">video</span>&gt;

以下はメッセージ表示欄に画像を埋め込むサンプルです。
メッセージサンプル

&lt;<span style="color: #0066ff">video</span> <span style="color: #ff0000">controls</span>&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.mp4</span>" type="<span style="color: #ff6600">video/mp4</span>" /&gt;
  &lt;<span style="color: #0066ff">source</span> src="<span style="color: #ff6600">sample.ogv</span>" type="<span style="color: #ff6600">video/ogg</span>" /&gt;
  &lt;img src="任意の画像パス" alt="お使いのブラウザは video タグに対応していません" /&gt;
&lt;/<span style="color: #0066ff">video</span>&gt;

ページを開いたタイミングで動画ファイルの再生を始める

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">autoplay</span>&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

autoplay 属性を記述することにより、Web ページを開いたタイミングから動画ファイルを自動再生します。
通常はオフになっています。

ページを開いたタイミングで動画ファイルの読み込みを始める

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">preload</span>&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

preload 属性を記述することにより、Web ページを開いたタイミングから動画ファイルの読み込みを始めます。
autoplay 属性とは違い、自動再生は始まりません。

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">preload</span>="<span style="color: #ff6600">none</span>"&gt;&lt;/<span style="color: #0066ff">video</span>&gt;
&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">preload</span>="<span style="color: #ff6600">auto</span>"&gt;&lt;/<span style="color: #0066ff">video</span>&gt;
&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">preload</span>="<span style="color: #ff6600">metadata</span>"&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

preload 属性に none を指定することで自動読み込みを停止させることができます。
preload 属性に metadata を指定すると動画サイズ、最初のフレーム、トラックのリスト、再生時間などのみを取得します。

ポスターフレーム画像を指定する

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">poster</span>="<span style="color: #ff6600">poster_sample.jpg</span>"&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

poster 属性に画像ファイルのパスを指定することで動画再生前の画面に表示する画像を設定できます。
埋め込まれている動画コーデックに非対応のブラウザでもポスターフレーム画像は見ることができます。

大きさを指定する

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" width="<span style="color: #ff6600">320</span>" height="<span style="color: #ff6600">180</span>" <span style="color: #ff0000">controls</span>&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

width 属性は動画の横幅を、height 属性は動画の縦幅を設定できます。
これは本来横480px・縦270pxサイズの動画を横320px・縦180pxで表示するサンプルです。

動画をループ設定にする

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">loop</span>&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

loop 属性を指定することで動画が自動でループする設定になります。

動画を消音(ミュート)設定にする

&lt;<span style="color: #0066ff">video</span> src="<span style="color: #ff6600">sample.mp4</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">muted</span>&gt;&lt;/<span style="color: #0066ff">video</span>&gt;

muted 属性を指定することで動画の初期設定を消音(ミュート)状態にできます。

audio タグで指定できる属性の紹介と使用例

最もシンプルな記述

&lt;<span style="color: #0066ff">audio</span> src="<span style="color: #ff6600">sample.mp3</span>" <span style="color: #ff0000">controls</span>&gt;&lt;/<span style="color: #0066ff">audio</span>&gt;

もっともシンプルな形のマークアップです。
src 属性は必須の属性で、音声コンテンツへのパスを記述します。
audio タグでは controls 属性もほぼ必須になります。

ページを開いたタイミングで音声ファイルの再生を始める

&lt;<span style="color: #0066ff">audio</span> src="<span style="color: #ff6600">sample.mp3</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">autoplay</span>&gt;&lt;/<span style="color: #0066ff">audio</span>&gt;

autoplay 属性を記述することにより、Web ページを開いたタイミングから音声ファイルを自動再生します。
通常はオフになっています。

ページを開いたタイミングで音声ファイルの読み込みを始める

&lt;<span style="color: #0066ff">audio</span> src="<span style="color: #ff6600">sample.mp3</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">preload</span>&gt;&lt;/<span style="color: #0066ff">audio</span>&gt;

preload 属性を記述することにより、Web ページを開いたタイミングから動画ファイルの読み込みを始めます。
autoplay 属性とは違い、自動再生は始まりません。

音声をループ設定にする

&lt;<span style="color: #0066ff">audio</span> src="<span style="color: #ff6600">sample.mp3</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">loop</span>&gt;&lt;/<span style="color: #0066ff">audio</span>&gt;

loop 属性を指定することで音声が自動でループする設定になります。

音声を消音(ミュート)設定にする

&lt;<span style="color: #0066ff">audio</span> src="<span style="color: #ff6600">sample.mp3</span>" <span style="color: #ff0000">controls</span> <span style="color: #ff0000">muted</span>&gt;a&lt;/<span style="color: #0066ff">audio</span>&gt;

muted 属性を指定すること上記のようにすることで音声の初期設定を消音(ミュート)状態にできます。

最後に

今回ご紹介した video タグも仕様変更する可能性がございます。
また一緒に学習していきましょう。

MakeLeaps

MakeLeapsは見積書・納品書・請求書の発行管理クラウドソリューション。このブログでは、国内のフリーランスや中小企業の読者の悩み解決・成長に役立つ情報やMakeLeapsのニュースなどをお届けします!

MakeLeapsの他の記事