trackタグ -字幕やキャプションを追加する｜HTML辞典

<track>タグとは？

<track> タグは、<video> や <audio> に字幕やキャプション、説明テキストを追加するためのタグです。
動画の視聴者に 字幕（クローズドキャプション）や翻訳を提供 する際に使用されます。

基本情報

コンテンツモデル

メタデータコンテンツ（Metadata Content）。

閉じタグの有無

<track> は 自己終了タグ のため、閉じタグ（</track>）は不要 です。

基本的な記述方法

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

使用できる主な属性

<track> タグには以下の重要な属性があります。

属性名	説明	例
src	字幕ファイルの URL	<track src="captions.vtt">
kind	字幕の種類（subtitles、captions、descriptions など）	<track kind="subtitles">
srclang	字幕の言語（ISO 639-1 コード）	<track srclang="ja">
label	字幕の表示名	<track label="日本語">
default	デフォルトの字幕として使用	<track default>

CSSを使ったデザイン変更

<track> 自体はスタイルを変更できませんが、<video> の字幕は ::cue 疑似要素でデザイン可能 です。

::cue {
    color: yellow;
    background-color: black;
    font-size: 16px;
}

適切な使用例

✅ 英語と日本語の字幕を追加する

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

✅ 音声解説（オーディオディスクリプション）を追加する

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="descriptions.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
</video>

✅ キャプション（聴覚障害者向け字幕）を追加する

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="captions.vtt" kind="captions" srclang="en" label="Captions">
</video>

適切でない使用例（誤った使い方）

❌ <track> を <video>の外に記述すると無効になる

<!-- NG: <video> の外に <track> を記述 -->
<track src="captions.vtt" kind="captions" srclang="en">
<video controls>
    <source src="movie.mp4" type="video/mp4">
</video>

✅ 正しい書き方（<track> は <video>内に配置）

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="captions.vtt" kind="captions" srclang="en">
</video>

❌ src を指定しないと字幕が読み込まれない

<!-- NG: src属性なし -->
<track kind="subtitles" srclang="en">

✅ 正しい書き方（src を指定）

<track src="subtitles.vtt" kind="subtitles" srclang="en">

<track>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<track>	字幕や説明テキストを追加	src に .vtt ファイルを指定	動画や音声の字幕
<source>	メディアのファイルソースを指定	src に .mp4 や .ogg などを指定	動画や音声のファイル
<video>	動画を再生	controls で操作可能	ブラウザで動画を表示

使用上の注意点

✅ src を正しく指定する

• .vtt 形式の字幕ファイルを指定する。

✅ kind を適切に設定する

• subtitles（翻訳字幕）、captions（キャプション）、descriptions（音声解説）など、用途に応じて適切な値を設定する。

✅ <track> は <video>内に記述する

• <video> の外に記述すると、機能しない。

関連タグ

• <video>– 動画を再生
• <audio> – 音声を再生
• <source> – 動画・音声のファイルを指定
• <caption> – テーブルのタイトルを指定（<track> とは異なる）

まとめ

<track> タグは、HTML文書内で <video>や <audio> に字幕や説明テキストを追加するためのタグ です。
src に .vtt ファイルを指定し、適切な kind を設定することで、視聴者に字幕や音声ガイドを提供できます。