HTML5HTML5 タグリファレンス

track

 HTML5で追加

<track>要素は、メディアファイルのコンテナの外にある(アウトオブバンド: out-of-band)のテキストトラックを表します。トラックのタイプはkind属性にキーワードで指定します。

カテゴリ
なし
配置場所
メディア要素(<video><audio>)の子要素として、フロー・コンテンツよりも前に配置。
内容
なし(空要素)
属性
kind="トラックの種類"
トラックの種類をキーワードで指定します。省略された場合のデフォルト値はsubtitles(字幕)です。
subtitles字幕。ビデオの上に重ねられます。
captionsキャプション(見出し)。
descriptions説明。
chapters章。
metadataスクリプトからの使用を目的としたトラック。ブラウザに表示されません。
参考:https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-track-kind
src="URL"
ファイル(主にWebVTTフォーマット)のURLを指定します。
srclang="言語コード"
テキストトラックの言語を指定します。値は有効なBCP47言語タグでなければなりません。kind属性がsubtitles状態の場合はsrclang属性は必須です。
label="トラックのタイトル"
ユーザーが読めるトラックのタイトルを指定します。字幕、キャプション、およびオーディオ記述トラックなどを表示する際に使用されます。
default[="default"]
別トラックが適切であるとユーザーの設定で示されてない場合に、デフォルトのトラックであることを示します。メディア要素の中で一つのtrack要素のみ指定します。
グローバル属性

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 › track</title>
</head>
<body>
<h1>HTML5 › track</h1>


<video preload autoplay loop controls width="480" height="360" id="mov">
<source src="https://blog.emwai.jp/files/html5/iStock_000009283938PAL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<track label="字幕" kind="subtitles" src="https://blog.emwai.jp/files/html5/iStock_000009283938PAL.subtitles.vtt" srclang="ja" default>
</video>

<p>
<span id="pause">停止</span> |
<span id="play">再生</span>
</p>

<script>
var mov = document.getElementById('mov');

document.getElementById('pause').addEventListener('click', function(){
  mov.pause();
});
document.getElementById('play').addEventListener('click', function(){
  mov.play();
});
</script>
</body>
</html>