ウェブランサー

<track> 動画や音声ファイルに字幕やキャプションを追加する

取り扱い HTML5から追加された要素
カテゴリ なし
親にできる要素 <audio> <video> 内のフローコンテンツより前に設置
子にできる要素 なし
対応ブラウザ <track>の対応状況を確認する

<track>タグの説明

<track>は、動画や音声ファイルに字幕やキャプションを追加するために使用します。このタグを用いることで、メディア要素にキュー、メタデータ、テキストトラックを簡単に追加することができます。

表示するテキストトラックは、WebVTTなどのブラウザがサポートしている形式で保存された外部ファイルを、src属性で読み込んで使用します。

キューデータや字幕情報を動画ファイルと切り離した状態で管理することで、コンテンツに柔軟性と拡張性を持たせることができます。<track>要素を使いこなすことで、コンテンツの操作や管理が容易になり、<audio>要素と<video>要素の付加価値を高めることが可能となりました。

<track>タグの特徴

<track>は、<audio>および<video>要素内に設置可能です。それ以外では機能しません。

<track>は空要素です。子要素を持たせることはできません。

<track>タグに指定できる属性

src属性
テキストトラックを読み込む外部ファイルが置かれたURLを指定します。
kind属性
テキストトラックの種類をキーワードで指定します。
srclang属性
テキスデータの言語を指定します。
label属性
テキストトラックの名前を指定します。
default属性
テキストトラックを複数設置した場合に、優先的に使用するものを指定します。

<track>タグの使い方とサンプル

<track>を使ったマークアップのサンプルです。

HTML
<video autoplay controls width="480"height="270">
	<source src="vtr.webm" type="video/webm">
	<source src="vtr.mp4" type="video/mp4">
	<track kind="captions" label="English captions" src="vtr_en.vtt" srclang="en" default>
	<track kind="captions" label="Japanese captions" src="vtr_ja.vtt" srclang="ja">
	<p>
		<a href="vtr.mp4">動画ファイルを保存後に再生してください。</a>
	</p>
</video>
WebVTT
WEBVTT

1
00:00:10.000 --> 00:00:13.000
1のタイミングで表示するキャプションを記述

2
00:00:13.100 --> 00:00:18.800
2のタイミングで表示するキャプションを記述

3
00:00:20.000 --> 00:00:25.000
3のタイミングで表示するキャプションを記述

<track>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する