<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>