VIDEO LESSON

HTMLのtrackタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:12動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の六本目は、トラックタグです。
0:06これは、動画や音声に字幕などのテキストを関連付けるためのタグです。
0:11映像そのものを作るタグではなく、映像に合わせて表示される文字情報を、外部ファイルから読み込む役割を持っています。
0:18耳の不自由な方への配慮や、音を出せない場所での視聴など、動画をより多くの人に届けるための大切な仕組みです。
0:26今回は、基本の書き方から、字幕ファイルの中身、属性の使い分け、表示されないときの確認ポイントまで、
0:30初心者向けに順番に解説します。
0:34トラックタグが活躍するのは、動画や音声に文字情報を重ねたい場面です。
0:40代表的なのは、セリフや効果音まで文字で伝える字幕です。
0:45音が聞こえにくい方でも内容を追えるようになります。
0:49ほかにも、外国語の翻訳字幕、映像の内容を言葉で説明する解説テキスト、動画の区切りを示すチャプター情報など、
0:55目的に応じて種類を使い分けられます。
1:01字幕は、単なる飾りではありません。
1:04動画の内容を、音に頼らずに届けるための情報として用意する、という視点が大切です。
1:11自分の動画を誰が、どんな環境で見るのかを想像して選んでください。
1:16基本の書き方です。
1:18トラックタグは空要素と呼ばれる種類で、終了タグは書きません。
1:24内側に文字を入れる場所もありません。
1:27代わりに、ビデオタグやオーディオタグの内側に子要素として置き、属性で読み込むファイルや種類を指定します。
1:36親になるメディア要素があって、初めて意味を持つタグだと覚えてください。
1:43単独でページに置いても、何も表示されません。
1:47書き方自体は一行で済みますが、どのファイルの、どんな種類のテキストなのかを、
1:52属性で正しく伝えることが重要です。
1:57次のセクションで、実際のコードを見ていきましょう。
2:01記事の活用事例を見てみましょう。
2:04ビデオタグの中に、トラックタグを一行加えた例です。
2:07カインド属性で字幕であることを示し、エスアールシー属性で字幕ファイルの場所を指定しています。
2:13エスアールクラングは言語で、日本語を表すジェーエーを書き、ラベルには利用者が選ぶときに見える名前として、
2:18日本語字幕と入れています。
2:22最後のデフォルトは、この字幕を既定の候補にする指定です。
2:26試すときは、エイチティーエムエルファイルを保存して再読み込みし、動画の字幕ボタンから日本語字幕を選べるかを確認してみてください。
2:34字幕ファイルの中身も確認しておきます。
2:37トラックタグが読み込むのは、ウェブブイティーティー形式のテキストファイルです。
2:42一行目には必ず、ウェブブイティーティーという文字から始める決まりがあります。
2:48そのあとは、字幕を表示する時刻の範囲と、表示したい文章をセットにして、必要な分だけ繰り返し書きます。
2:54時刻は、開始と終了を矢印のような記号でつないで指定します。
2:58この書式が崩れていると、ファイルがあっても字幕は表示されません。
3:03まずは短い動画で、二つか三つの字幕だけを作って試すと、仕組みがつかみやすくなります。
3:08属性の中でも中心になるのが、カインド属性です。
3:12これは、そのテキストが何なのか、種類を指定します。
3:15キャプションズは、セリフだけでなく、ドアの音や音楽といった音の情報まで含めた字幕です。
3:22サブタイトルズは、主にセリフを別の言語に翻訳した字幕を指します。
3:27そのほか、映像を言葉で説明するディスクリプションズ、区切りを示すチャプターズ、
3:31画面には表示しないデータ用のメタデータがあります。
3:36似ているキャプションズとサブタイトルズを取り違えやすいので、音の説明まで含むかどうかで判断してください。
3:44種類を正しく伝えることで、ブラウザーが適切な方法で表示できます。
3:48主な属性を整理します。
3:50エスアールシーは、読み込むブイティーティーファイルの場所です。
3:55実在するファイルへ、正しいパスを指定してください。
3:59エスアールクラングはトラックの言語で、日本語ならジェーエー、英語ならイーエヌと書きます。
4:06特にサブタイトルズのトラックでは、この指定が必要です。
4:11ラベルは、字幕の選択メニューに表示される、利用者向けの名前です。
4:16デフォルトは、そのトラックを既定の候補にする指定ですが、利用者自身の設定が優先される場合もあると覚えておいてください。
4:26四つの役割を分けて考えると、迷いにくくなります。
4:29共通属性についても確認します。
4:32トラックタグでも、すべての要素で使えるグローバル属性が利用できます。
4:37文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
4:42内容の言語を示すラングなどです。
4:47アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
4:53また、デフォルトのような真偽属性は、書いてあるかどうかで決まります。
4:58解除したいときは、値で切り替えるのではなく、属性そのものを取り除くのがルールです。
5:04ほかのタグと共通の考え方なので、ここで一緒に覚えておきましょう。
5:09字幕が表示されないときの確認ポイントです。
5:12まず、エスアールシーで指定したパスの先に、ファイルが本当に存在するかを確認します。
5:17次に、ブイティーティーファイルの一行目が正しく書かれているか、時刻と本文の書式が崩れていないかを見直してください。
5:25意外と多いのが、この書式の小さなミスです。
5:28さらに、字幕ファイルを別のドメインから読み込む場合は、配信側のコースと呼ばれる許可設定も関係します。
5:34エラーの場所を一つずつ切り分けることが大切です。
5:37開発者ツールでファイルが読み込めているかを確認しながら、順番に直していきましょう。
5:43ブラウザー互換性を確認します。
5:45記事が参照するエムディーエヌの記録では、トラックタグはクロームが二十三以降、
5:52エッジが十二以降、ファイアフォックスが三十一以降、サファリが六以降に対応しています。
5:58現在の主要なブラウザーでは、長く使える基本的な仕組みの一つです。
6:03ただし、属性ごとに対応開始が異なる場合があります。
6:07たとえばエスアールシー属性は、ファイアフォックスでは五十以降となっています。
6:13この表が示すのは要素本体の対応であり、動画ファイルの形式まで含めた完全な動作を保証するものではありません。
6:22対象とする実機でも、字幕の表示を確認すると安心です。
6:26最後に練習とまとめです。
6:28トラックタグは、動画や音声に字幕などのテキストトラックを関連付けるタグでした。
6:34大切なポイントは三つです。
6:36一つ目は、ビデオタグの内側に置く空要素で、終了タグは書かないこと。
6:41二つ目は、字幕の中身はウェブブイティーティーファイルに書き、一行目の書式を守ること。
6:48三つ目は、カインド、エスアールシー、エスアールクラング、ラベルといった属性で、
6:53種類とファイルと言語を正しく伝えることです。
6:58練習として、短い動画に日本語字幕のファイルを用意し、字幕ボタンから選んで表示されるかを確かめてみてください。
7:06お疲れさまでした。
7:08次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

trackタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。動画の字幕などのテキストトラック。WebVTTファイルを src で指定します。

解説記事・サンプルコードを読む：HTMLのtrackタグとは？属性・使い方・ブラウザー互換性と活用例 →