動画を埋め込む<video>タグの解説、音声を埋め込む<audio>タグ、video要素やaudio要素のトラック情報を指定する<track>タグ、video要素、audio要素、picture要素で複数の外部リソースを指定する<source>タグの使用法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| video要素 |
|
トランスペアレントコンテンツ
|
| audio要素 |
|
|
| track要素 | なし |
空 |
| source要素 | – |
– |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
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>
コメント