HTML5タグリファレンス
track

投稿 | | カテゴリー タグリファレンス, HTML5
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要素のみ指定します。

グローバル属性

accesskey, class, contenteditable, data-*, dir, hidden, id, lang, spellcheck, style, tabindex, title, translate

サンプル

<!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="http://blog.emwai.jp/img/iStock_000009283938PAL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<track label="字幕" kind="subtitles" src="http://blog.emwai.jp/img/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>