【HTML Living Standard】track要素の使い方
track要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
trackオブジェクトは、HTMLの<video>要素や<audio>要素といったメディアコンテンツに対して、テキスト形式の追加情報を提供するためのオブジェクトです。このオブジェクトの主な目的は、メディアに字幕、キャプション、説明、チャプターリスト、またはメタデータといった補助的なテキストトラックを関連付けることです。
具体的には、<video>または<audio>要素の子要素として配置され、src属性を用いてWebVTT（Web Video Text Tracks Format）形式で記述されたテキストファイルを参照します。WebVTTファイルには、メディアの特定の時間軸に合わせて表示されるテキストコンテンツや、その表示タイミングに関する情報が格納されています。
trackオブジェクトは、メディアコンテンツのアクセシビリティと国際化を大幅に向上させるために不可欠です。例えば、聴覚に障がいを持つユーザー向けのキャプションや、異なる言語を話すユーザー向けの字幕を提供することで、より多くの人々がコンテンツを理解し、楽しめるようになります。
主要な属性としては、kind属性でトラックの種類（例えば、字幕を示す"subtitles"、キャプションを示す"captions"、説明を示す"descriptions"など）を指定します。srclang属性はトラックの言語コード（例: "ja"、"en"）を示し、label属性はユーザーインターフェースに表示されるトラックのタイトルを提供します。また、default属性を設定することで、特定のトラックをメディアがロードされたときに自動的に有効化できます。
このように、trackオブジェクトはメディアコンテンツをより豊かにし、広範なユーザーに対応させるための強力な機能を提供します。
構文(syntax)
1<track src="captions.vtt" kind="captions" srclang="en" label="English captions">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML track要素で字幕を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML track 要素のサンプルコード</title> 7</head> 8<body> 9 <!-- 10 track要素は、<video>または<audio>要素の子要素として使用され、 11 時間指定されたテキストトラック（字幕、キャプション、説明など）を提供します。 12 ユーザーが動画や音声コンテンツの理解を深めるのを助けるために利用されます。 13 --> 14 <video controls width="640" height="360"> 15 <!-- 16 動画ファイルを指定します。 17 このパスは、実際に存在する動画ファイル（例: MP4形式）に置き換える必要があります。 18 --> 19 <source src="sample_video.mp4" type="video/mp4"> 20 21 <!-- 22 kind="subtitles": トラックの種類が字幕であることを示します。 23 src="subtitles_en.vtt": 字幕ファイル（WebVTT形式）のパスを指定します。 24 このファイルは別途作成する必要があります。 25 （例: "WEBVTT FILE\n\n00:00:01.000 --> 00:00:03.000\nHello, world!") 26 srclang="en": 字幕の言語が英語であることを示します。 27 label="English": ユーザーインターフェースに表示される字幕の名前です。 28 default: このトラックがデフォルトで選択されることを示します。 29 --> 30 <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default> 31 32 <!-- 複数の言語の字幕を提供することも可能です --> 33 <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja" label="日本語"> 34 35 <!-- ブラウザがvideo要素に対応していない場合に表示される代替コンテンツ --> 36 <p>お使いのブラウザは動画要素に対応していません。</p> 37 </video> 38</body> 39</html>
track要素は、HTMLの<video>や<audio>要素内で使用される、時間指定されたテキストトラックを提供する要素です。これにより、動画や音声コンテンツに字幕、キャプション、音声の説明などを追加し、ユーザーが内容をより深く理解したり、アクセシビリティを向上させたりする目的で利用されます。この要素は単体では機能せず、必ず親となるメディア要素の内部に配置されます。track要素自体に直接の引数や戻り値はなく、その動作は主に複数の属性によって細かく制御されます。
サンプルコードでは、<video>要素の子要素として<track>要素が二つ使われています。一つ目の<track>要素は、kind="subtitles"でトラックの種類が字幕であることを示し、src="subtitles_en.vtt"で字幕データのファイルパスを指定しています。この字幕ファイルは一般的にWebVTT形式で作成されます。srclang="en"は字幕の言語が英語であることを、label="English"はユーザーインターフェースに表示される字幕の名前を示し、default属性はこのトラックが初期状態で選択されることを意味します。二つ目の<track>要素は、同様に日本語の字幕を提供するための設定がされており、このように複数の言語や種類のトラックを追加することで、多様なユーザーニーズに対応できます。
track要素は、必ず<video>または<audio>要素の子要素として配置してください。単独では機能せず、動画や音声コンテンツに時間指定テキストを提供する役割を持ちます。src属性で指定するファイルは、サンプルコードにあるようにWebVTT（.vtt）形式で作成する必要があります。このファイルと動画/音声ファイルは、プロジェクト内で適切なパスに配置しないと、ブラウザで正しく読み込まれません。
kind属性は字幕やキャプションなどトラックの種類を示し、ユーザーインターフェースやアクセシビリティに影響するため、目的に応じて適切に指定することが重要です。default属性は初期表示したいトラックに一つだけ設定し、複数の言語に対応する場合は、各track要素に異なるsrclangとlabelを設定することで、ユーザーが選択しやすくなります。
HTML track要素で動画字幕を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML track 要素サンプル</title> 7</head> 8<body> 9 <h1>動画字幕の表示例</h1> 10 11 <!-- video要素: 動画コンテンツを表示します。controls属性で再生コントロールを有効にします。 --> 12 <video controls width="640" height="360" poster="video-thumbnail.jpg"> 13 <!-- source要素: 異なる形式の動画ファイルを提供し、ブラウザがサポートする形式を自動選択させます。 --> 14 <source src="sample-video.mp4" type="video/mp4"> 15 <source src="sample-video.webm" type="video/webm"> 16 17 <!-- track要素: 動画にテキストトラック（字幕、キャプション、説明など）を追加します。 --> 18 <!-- kind="subtitles": 字幕として扱われ、ユーザーが言語を選択できます。 --> 19 <!-- src: WebVTT形式の字幕ファイル（.vtt）のURLを指定します。 --> 20 <!-- srclang: 字幕の言語コードを指定します（例: "ja"は日本語、"en"は英語）。 --> 21 <!-- label: プレイヤーUIに表示される字幕の名称です。 --> 22 <!-- default: この属性があるtrack要素は、デフォルトで有効になります。 --> 23 <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja" label="日本語" default> 24 <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"> 25 26 <!-- ブラウザがvideo要素をサポートしていない場合に表示される代替コンテンツです。 --> 27 <p>お使いのブラウザはHTML5ビデオをサポートしていません。 28 <a href="sample-video.mp4">動画ファイルをダウンロード</a>してください。</p> 29 </video> 30</body> 31</html>
HTMLのtrack要素は、<video>や<audio>要素の中に記述され、メディアコンテンツに時間同期されたテキストトラックを追加するために使われます。これにより、動画に字幕、キャプション、説明、チャプターリストなどの情報を付与できます。track要素自体には引数や戻り値はありませんが、その動作はさまざまな属性によって細かく制御されます。
サンプルコードでは、<video>要素の子要素としてtrackが使われ、動画に日本語と英語の字幕を提供しています。kind属性でトラックの種類が「字幕（subtitles）」であることを示し、src属性で字幕データが書かれたWebVTT形式（.vtt）ファイルの場所を指定します。srclang属性は字幕の言語コード（例: "ja"は日本語）を、label属性は動画プレイヤーに表示される字幕の名称を設定します。default属性があるtrackは、動画再生時に自動的に有効となる字幕です。
このようにtrack要素は、動画の多言語対応やアクセシビリティを向上させ、視聴者がコンテンツをより深く理解し、楽しめるようにするための重要な役割を担っています。
track要素は動画や音声コンテンツに字幕やキャプションを提供する重要な要素です。必ずvideoまたはaudio要素の子要素として配置してください。src属性には**WebVTT形式（.vtt）**のファイルパスを正しく指定する必要があります。他の形式では機能しません。srclangとlabel属性は、ユーザーが字幕を選択する際の表示言語と名称を決定するため、明確に設定することが重要です。default属性は一つだけ設定し、初期表示する字幕を指定します。複数のdefault属性がある場合の動作はブラウザにより異なります。異なるドメインにあるWebVTTファイルを読み込む際は、CORS（クロスオリジンリソース共有）の設定が必要になる場合がありますので注意が必要です。アクセシビリティ向上のため、内容が正確なWebVTTファイルを用意しましょう。