cman.jpWEBページ作成
広告
<track> 「動画・音声のテキスト・トラック」[読み方：トラック]
<track>タグは、<audio>タグや<video>タグに字幕などのテキストトラックを組み込む場合に使用します。
<track>タグには終了タグはありません。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<track>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<track> の仕様
<track> の属性
【構文】
<track src="テキストファイル名" kind="種類" srclang="言語コード"・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src="テキストファイル名" | 組み込むテキストトラックファイルのURL【必須】 | 「sample.vtt」 「sample.ttml」 拡張子：「.vtt」「.ttml」 | ||||||||||||
| kind="値" | テキストトラックの種類をキーワードで指定 |
|
||||||||||||
| srclang="言語" | テキストトラックデータの言語コードを指定する 【条件付必須】下記留意事項参照 |
|
||||||||||||
| label="ラベル名" | トラックのタイトル | - | ||||||||||||
| default | デフォルトで有効になるトラックを指定 | - |
| グローバル属性 |
| |
| イベント属性 |
| |
<track>タグのサンプル
「audio」タグと組み合わせたサンプル
<audio controls>
<source src="se_maoudamashii_onepoint03.mp3"type="audio/mp3">
<source src="se_maoudamashii_onepoint04.ogg"type="audio/ogg">
<track src="track_audio.vtt" kind="subtitles" srclang="ja"default>
<p style="color:red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>
<source src="se_maoudamashii_onepoint03.mp3"type="audio/mp3">
<source src="se_maoudamashii_onepoint04.ogg"type="audio/ogg">
<track src="track_audio.vtt" kind="subtitles" srclang="ja"default>
<p style="color:red">HTML5のaudioに対応していないブラウザのためサンプルは表示されません。</p>
</audio>
（2014/09/10時点で対応しているブラウザは、ありません。）
「video」タグと組み合わせたサンプル
<video autoplay controls width="300"height="250">
<source src="e23.webm" type="video/webm">
<source src="e23.mp4" type="video/mp4">
<track src="track_video.vtt" kind="subtitles" srclang="ja"default>
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>
<source src="e23.webm" type="video/webm">
<source src="e23.mp4" type="video/mp4">
<track src="track_video.vtt" kind="subtitles" srclang="ja"default>
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>
動画：kawacho様よりダウンロードし利用させていただいています。
留意事項
広告