メディアのトラック情報を指定するには?
trackタグの書式
trackタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
trackタグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
kind | トラック情報の種類を指定します。 指定できる値は次の通りです。 「subtitles」:字幕 「captions」:見出し(音声が聞き取れない場合に、表示することを想定) 「descriptions」:メディアの説明(映像が参照できない場合に、音声に変換して利用することを想定) 「chapters」:チャプター・タイトル 「metadata」:メタデータ
|
src | トラック情報データのパスを指定します。 |
srclang | トラック情報の言語を指定します。 |
label | ユーザに表示するトラックのタイトルを指定します。 なお、指定する値は、空ではない必要があります。 |
default | デフォルトのトラック情報であることを指定します。 この属性を有効にするには 「default」 「default="default"」 「default=""」 のいずれかを指定します。 なお、同じメディアの要素内で、この属性を有効にできる<track>要素は1つだけです。 |
trackタグの解説
<track>タグは、メディアのトラック情報を指定するための要素です。
メディアのトラック情報は、例えば、ビデオや音声に対する字幕や見出しなどの情報が該当します。
「kind」属性で、どのような種類のトラック情報とするかを指定できます。
<track>はメディア要素(<audio>や<video>)の子要素として使用します。
trackタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<header>
<h1>ビデオ再生</h1>
</header>
<video src="sample.mpeg">
<track kind=subtitles src=sample.jp.vtt srclang=jp label="Japanese" default>
<track kind=captions src=sample.en.vtt srclang=en label="English">
<track kind=subtitles src=sample.fr.vtt srclang=fr label="French">
<p>このブラウザではビデオを再生できません。</p>
</video>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
trackタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<header>
<h1>Music</h1>
</header>
<audio autoplay controls>
<source src="sample_audio.mp3" type="audio/mp3" media="screen">
<source src="sample_audio.wav" type="audio/wav" media="screen">
<source src="sample_audio.ogg" type="audio/ogg" media="screen">
<track kind=subtitles src=sample_audio.jp.vtt srclang=jp label="Japanese">
<p>このブラウザでは音声を再生できません。</p>
</audio>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
trackタグの関連項目