HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<track>
メディア要素 (<audio> / <video>) のために、時間指定されたテキストトラックを提供します。主に字幕やキャプションに使用されます。
info
概要
<track> 要素は、`
play_circle
デモ (静的表示)
HTML (Source)
<video controls poster="video-poster.png">
<source src="sample-video.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles-ja.vtt" srclang="ja" label="日本語字幕" default>
<track kind="captions" src="captions-en.vtt" srclang="en" label="English Captions">
</video>
Preview (Result)
ブラウザの静的プレビューでは動画と字幕の動作は確認できません。
ソースコードをご確認ください。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| src | WebVTT ファイルへのURLを指定します。必須属性です。 |
| kind | テキストトラックの種類を指定します。必須属性です。subtitles (字幕), captions (キャプション), descriptions (説明), chapters (チャプター), metadata (メタデータ)
|
| label | ユーザーインターフェースに表示されるトラックのタイトルを指定します（例: 「日本語字幕」）。 |
| srclang | トラックデータの言語を指定します（例: ja, en）。kind="subtitles" の場合に必須です。 |
| default | このトラックが既定で有効になっているべきであることを示します。一つのメディア要素内で一つだけ指定可能です。 |
code
実用例
1. 日本語字幕と英語キャプションの指定
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="jp-sub.vtt" srclang="ja" label="日本語" default>
<track kind="captions" src="en-cap.vtt" srclang="en" label="English">
</video>
2. 説明 (Descriptions) トラックの利用
<!-- 視覚障害のあるユーザー向けに動画の内容を音声で説明するためのトラック -->
<video controls>
<source src="presentation.mp4" type="video/mp4">
<track kind="descriptions" src="description-ja.vtt" srclang="ja" label="音声解説">
</video>
3. WebVTTファイルの内容 (例: jp-sub.vtt)
WEBVTT
00:00:01.000 --> 00:00:03.500
こんにちは、これは最初の字幕です。
00:00:04.000 --> 00:00:07.000 align:end size:50%
ビデオ
これは次の字幕で、位置とサイズが調整されています。
lightbulb
知っておくべき重要事項
code
トラックファイルの形式
<track>要素は、通常 **WebVTT** (Web Video Text Tracks) 形式のテキストファイル（`.vtt` 拡張子）を参照します。これは、字幕やキャプションの時間と内容を定義するための標準フォーマットです。
accessibility_new
アクセシビリティの確保
`
`