HTML辞典 video要素、audio要素、track要素、source要素の解説
動画を埋め込む<video>タグの解説、音声を埋め込む<audio>タグ、video要素やaudio要素のトラック情報を指定する<track>タグ、video要素、audio要素、picture要素で複数の外部リソースを指定する<source>タグの使用法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| video要素 |
| トランスペアレントコンテンツ
|
| audio要素 |
| |
| track要素 | なし | 空 |
| source要素 | – | – |
グローバル属性
HTML共通で指定できるグローバル属性について
source要素 書式・概要
<source 属性="属性値">～</source>source要素は、audio要素、video要素、picture要素に対して、選択可能なファイルを複数指定します。複数のファイルを用意することで閲覧者の環境に合わせて適切なファイルが選択されます。
また、source要素は、sizes属性を使用することでイメージソースを出し分けられます。
使用できる属性
src
文書内に埋め込む音声ファイルのURLを指定します。
<source src="sample.mp3">～</source>srcset
複数のイメージソースを指定して、ディスプレイサイズやデバイスピクセル比に応じて代替え画像を出力します。候補となる画像のURLに合わせて、表示する条件を半角スペースで区切って指定します。各条件は数値に画像の幅「w」、高さ「h」、デバイスピクセル比「x」の単位を付けて任意に指定します。また、画像の候補はカンマ（,）で区切って複数個を指定できます。
| 単位 | 説明 |
|---|---|
| w | 「768w」のようにディスプレイ幅を条件に指定する |
| h | 「800h」のようにディスプレイ高さで条件を指定する |
| x | 「2x」のようにディスプレイ比の倍率で条件を指定する |
type
リンク先のMIMEタイプ
media
リンク先の文書や読み込む外部リソースがどのメディアに適合するのか指定します。media属性の値は妥当なメディアクエリである必要があります。
audio要素 書式・概要
<audio 属性="属性値">～</audio>audio要素は、文書内に音声ファイルを埋め込みます。プラグインを必要とせずブラウザの機能のみで再生することができます。
使用できる属性
src
文書内に埋め込む音声ファイルのURLを指定します。
<audio src="sample.mp3">～</audio>crossorigin
CORS（Cross-Origin Resource Sharing クロスドメイン通信）を設定できる属性です。サードパーティーから読み込んだ画像を、canvas要素で利用できるようになります。
| anonymous | CookieやクライアントサイドのSSL証明書、HTTP認証などの ユーザー認証情報は不要です。 |
| use-credentials | ユーザー認証情報を求めます。 |
preload
再生するファイルを事前に読み込んでおくかを指定します。この属性はブラウザによって挙動が異なるため意図通り動作するかは不明です。
| none | 事前に何も読み込まない |
| metadata | 音声ファイルのサイズの長さなどのメタデータを読み込んでおく |
| auto | 音声ファイル全体を読み込んでおく |
autoplay
【論理属性】
読み込んだファイルを自動的に再生します。
mediagroup
音声・動画ファイルのグループ名を指定します。同一文書内で、同じmediagroup属性値を持つ、video要素やaudio要素はグループとして扱われ、連続再生などが可能になります。
loop
【論理属性】
エンドレス再生を行うように指定します。
muted
【論理属性】
ミュートした状態で再生ます。
controls
【論理属性】
音声ファイルの再生をコントロールするインタフェースを表示させます。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>audioタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<audio src="sample.mp3" controls>
</audio>
</body>
</html>chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
複数の形式を指定する方法
音声データはブラウザによって対応フォーマットが異なるので、複数のフォーマットデータを準備しておき対応しているものを再生できるようにsource要素が容易されています。source要素を使用する場合は、audio要素のsrc属性は使用できません。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>audioタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<audio controls>
<source src="sample.aac" type="audio/aac">
<source src="sample.mp3" type="audio/mpeg">
</audio>
</body>
</html>video要素 書式・概要
<video 属性="属性値">～</video>video要素は、文書内に動画ファイルを埋め込みます。プラグインを必要とせずブラウザの機能のみで再生することができます。
使用できる属性
src
文書内に埋め込む音声ファイルのURLを指定します。
<video src="sample.mp3">～</video>crossorigin
CORS（Cross-Origin Resource Sharing クロスドメイン通信）を設定できる属性です。サードパーティーから読み込んだ画像を、canvas要素で利用できるようになります。
| anonymous | CookieやクライアントサイドのSSL証明書、HTTP認証などの ユーザー認証情報は不要です。 |
| use-credentials | ユーザー認証情報を求めます。 |
preload
再生するファイルを事前に読み込んでおくかを指定します。この属性はブラウザによって挙動が異なるため意図通り動作するかは不明です。
| none | 事前に何も読み込まない |
| metadata | 動画ファイルのサイズの長さなどのメタデータを読み込んでおく |
| auto | 動画ファイル全体を読み込んでおく |
poster（ポスター）
動画を再生できない場合や再生の準備が整うまでの間に表示する画像のURLを指定します。
mediagroup
音声・動画ファイルのグループ名を指定します。同一文書内で、同じmediagroup属性値を持つ、video要素やaudio要素はグループとして扱われ、連続再生などが可能になります。
loop
【論理属性】
エンドレス再生を行うように指定します。
muted
【論理属性】
ミュートした状態で再生ます。
controls
【論理属性】
動画ファイルの再生をコントロールするインタフェースを表示させます。
width
動画ファイルの幅をピクセルで指定します。値には正の整数を指定します。
height
動画ファイルの高さをピクセルで指定します。値には正の整数を指定します。
使用方法
firefox以外のブラウザでは、posterで指定した画像ファイルで表示するが、firefoxに関しては、動画サイズで表示する。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>video タグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<video src="videosample.mp4" controls poster="videosample.jpg">
</video >
</body>
</html>chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
複数の形式を指定する方法
動画データはブラウザによって対応フォーマットが異なるので、複数のフォーマットデータを準備しておき対応しているものを再生できるようにsource要素が容易されています。source要素を使用する場合は、video要素のsrc属性は使用できません。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>videoタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<audio controls width="400" height="300">
<source src="video_sample.webm" type="video/webm">
<source src="video_sample.mp4" type="video/mp4">
</audio>
</body>
</html>track要素 書式・概要
<track 属性="属性値">track要素は、音声・動画ファイルのトラック情報（字幕、キャプション、チャプターなど）を指定することができます。トラックファイルはWebVTT（.vtt）で作る必要があります。
WebVTTファイルの作成
１行目に「WEBVTT」と記述し、空白行を記述します。次の行から「HH:MM:SS.000 –> HH:MM:SS.000」の形式でデータの表示時間を指定し、改行後に表示するテキストを記述します。ファイルは*.vttという形式で保存します。
WEBVTT
00:00:00.200 -- > 00:00:03.000
オープニング
00:00:00.300 -- > 00:00:06.000
動画始まっています。使用できる属性
kind
テキストトラックの種類を指定します。
| subtitles | 外国語の字幕を表します。（初期値） |
| captions | 音声が利用できない場合に対するテキストトラックを表します。 |
| descriptions | 動画の内容をテキストで説明したものを表します。 |
| chapters | チャプター（場面）のタイトルを表します。 |
| metadata | クライアントサイドスクリプトから利用する目的のテキストトラックを 表します。このテキストトラックは画面に表示されません。 |
src
動画に埋め込むテキストトラックのURLを指定します。
srclang
テキストトラックの言語を指定します。指定できる値はlang属性と同様です。kind属性の値がsubtitlesの場合、この属性による言語の指定は必須です。
| ja | 日本語 |
| en | 英語 |
| ko | 韓国語 |
| zh | 中国語 |
| zh-cn | 中国語（簡体） |
| zh-tw | 中国語（繋体） |
label
閲覧者に表示するコマンドやテキストトラックのラベルを指定します。
default
デフォルトのテキストトラックであることを表します。1つのaudio、video要素内に、この属性が指定されたテキストトラックは複数存在してはいけません。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>video タグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<video src="videosample.mp4" controls poster="videosample.jpg">
<track kind="subtitles" src="sample.jp.vvt" srclang="ja" label="日本語" default="default">
<track kind="subtitles" src="sample.en.vvt" srclang="en" label="English" >
</video >
</body>
</html>