<track> 要素は、メディアファイルのコンテナの外にある(アウトオブバンド: out-of-band)のテキストトラックを表します。トラックのタイプはkind 属性にキーワードで指定します。
- カテゴリー
- なし
- 配置場所
- メディア要素(
video、audio)の子要素として、フロー・コンテンツよりも前に配置。 - 内容
- なし(空要素)
- 属性
-
kind="トラックの種類"- トラックの種類をキーワードで指定します。省略された場合のデフォルト値は
subtitles(字幕)です。
参考:https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-track-kindsubtitles字幕。ビデオの上に重ねられます。 captionsキャプション(見出し)。 descriptions説明。 chapters章。 metadataスクリプトからの使用を目的としたトラック。ブラウザに表示されません。
src="URL"- ファイル(主にWebVTTフォーマット)のURLを指定します。
srclang="言語コード"- テキストトラックの言語を指定します。値は有効なBCP47言語タグでなければなりません。
kind 属性がsubtitles状態の場合はsrclang 属性は必須です。 label="トラックのタイトル"- ユーザーが読めるトラックのタイトルを指定します。字幕、キャプション、およびオーディオ記述トラックなどを表示する際に使用されます。
default[="default"]- 別トラックが適切であるとユーザーの設定で示されてない場合に、デフォルトのトラックであることを示します。メディア要素の中で一つの
<track> 要素のみ指定します。 - グローバル属性
accesskey,autocapitalize,autofocus,class,contenteditable,data-*,dir,draggable,enterkeyhint,hidden,id,inputmode,is,itemid,itemprop,itemref,itemscope,itemtype,lang,nonce,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="https://emwai.jp/files/reference/html5/iStock_000009283938PAL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<track label="字幕" kind="subtitles" src="https://emwai.jp/files/reference/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>
