Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【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オブジェクトはメディアコンテンツをより豊かにし、広範なユーザーに対応させるための強力な機能を提供します。

公式リファレンス: <track>: The Embed Text Track element

構文(syntax)

1<track src="captions.vtt" kind="captions" srclang="en" label="English captions">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ