＜track要素＞ - テキストトラック

公開日: 2017/02/09

track要素は、テキストトラックを表す要素です。字幕ファイルを、audio要素やvideo要素に関連付けることができます。

概要

名前: track
カテゴリー: なし。
配置できる場所: audio要素、video要素の子要素として、Flow contentよりも前に配置する。
コンテンツモデル: 空要素のため、子ノードを持ちません。
タグの省略: 省略できません。
DOM Interface: HTMLTrackElement
仕様書: https://html.spec.whatwg.org/multipage/embedded-content.html#the-track-element

属性

kind

テキストトラックの種類をキーワードで指定する。

subtitles: デフォルト値。会話の内容や翻訳などを表示する目的。ユーザーが音声を聴き取れるけど理解できない場合に適している。ビデオに重ねて表示される。subtitlesとは日本語で字幕という意味。
captions: 会話の内容や翻訳などを表示する目的。ユーザーが音声を聴き取れない場合に適している。このテキストトラックは難聴者向けとして分類される。ビデオに重ねて表示される。
chapters: チャプター。ビデオに重ねて表示されるのではなく、再生位置の呼び出しに利用されることを想定する。
descriptions: 目が不自由な場合、運転中など、ユーザーがメディアファイルを視聴できない場合の説明として利用されることを想定する。
metadata: JavaScriptを使って操作をするなど、アプリ側で使用する目的のテキストトラック。そのため、ブラウザには表示されない。

src

リソースのアドレス。

srclang

テキストトラックの言語。

label

項目名として表示されるラベル。

default

この属性を付けたテキストトラックは、ユーザーエージェントのアルゴリズムでテキストトラックを選択できなかった場合に、優先的に選択される。強制的にデフォルトになるわけではない。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

track要素は。audio要素、またはvideo要素の子要素に配置します。その際、source要素よりも後で、フォールバックとなるFlow contentよりも前に配置しなければいけません。

HTML

<!-- src属性の場合 -->
<video src="/video/dog.mp4" controls>
	<!-- track要素が先頭 -->
	<track kind="subtitles" src="./subtitles-ja.vtt" srclang="ja" label="日本語">
	<track kind="subtitles" src="./subtitles-en.vtt" srclang="en" label="English">

	<!-- フォールバックとなるFlow content -->
	<p>お使いの環境では、動画を再生できません…。</p>
</video>

<!-- source要素の場合 -->
<video controls>
	<!-- source要素が先頭 -->
	<source src="/video/dog.ogv" type="video/ogg">
	<source src="/video/dog.webm" type="video/webm">
	<source src="/video/dog.mp4" type="video/mp4">

	<!-- source要素の直後に配置 -->
	<track kind="subtitles" src="./subtitles-ja.vtt" srclang="ja" label="日本語">
	<track kind="subtitles" src="./subtitles-en.vtt" srclang="en" label="English">

	<!-- フォールバックとなるFlow content -->
	<p>お使いの環境では、動画を再生できません…。</p>
</video>

track要素にはルールがあるので違反しないようにして下さい。

src属性を指定しなければいけない。
srclang属性は、kind属性がsubtitles(字幕)の場合、指定しなければいけない。
label属性を指定する時は、空文字ではいけない。
kind属性がmetadata以外で、かつ、default属性があるtrack要素は、audio要素、またはvideo要素の中に複数存在してはならない。

字幕ファイルの作成方法は、video要素で説明しています。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜track要素＞ - テキストトラック</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/track/">
		<style>
			body {
				background-color: #fff ;
			}

			video {
				width: 600px ;
				max-width: 80% ;
			}
		</style>
	</head>
	<body>

<p>track要素は、動画や音声に字幕ファイルを関連付けるための要素です。</p>
<p><a href="./subtitles-ja.vtt" target="_blank">日本語字幕</a>と<a href="./subtitles-en.vtt" target="_blank">英語字幕</a>を、動画に関連付けています。ブラウザによってはデフォルトで字幕が非表示になっているかもしれません。コントローラで字幕を有効にして下さい。</p>

<video src="/video/dog.mp4" controls>
	<track kind="subtitles" src="subtitles-ja.vtt" srclang="ja" label="日本語">
	<track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
</video>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/639/"> <meta charset="utf-8"> <title>【デモ】＜track要素＞ - テキストトラック</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/track/"> </head> <body>

<p>track要素は、動画や音声に字幕ファイルを関連付けるための要素です。</p> <p><a href="./subtitles-ja.vtt" target="_blank">日本語字幕</a>と<a href="./subtitles-en.vtt" target="_blank">英語字幕</a>を、動画に関連付けています。ブラウザによってはデフォルトで字幕が非表示になっているかもしれません。コントローラで字幕を有効にして下さい。</p> <video src="/video/dog.mp4" controls> <track kind="subtitles" src="subtitles-ja.vtt" srclang="ja" label="日本語"> <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English"> </video>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } video { width: 600px ; max-width: 80% ; }

</style>

</script>