<track>要素の使い方・サンプルコード
Sara
<track>
<track>要素は、<audio>要素や <video>要素などのメディア要素の子要素として置くことで、字幕・キャプションなどのトラック情報を指定することができます。
トラック情報は WebVTT（Web Video Text Tracks）形式のファイルで作る必要があります。
デモ：track要素
属性
default
デフォルトの <track> 要素を指定します。論理属性です。
<track kind="subtitles" src="en.vtt" srclang="en" default>kind
トラック情報の種類を指定します。
| 値 | |
|---|---|
| subtitles（初期値） | コンテンツの字幕・翻訳を提供します。 |
| captions | コンテンツの書き起こしを提供します。 |
| descriptions | テキストによる動画コンテンツの説明・書き起こしを提供します。 |
| chapters | チャプター移動などリソースを操作するためのデータを指定します。 |
| metadata | ユーザーからは見えない、スクリプトが使用するデータです。 |
label
ユーザーから見えるテキストトラックのタイトルを指定します。
<track kind="subtitles" src="en.vtt" srclang="en" label="英語">src
トラック情報ファイル（.vtt）の URL を指定します。
<track kind="subtitles" src="en.vtt" srclang="en">srclang
テキストデータの言語コードを指定します。
kind 属性の値に subtitles を指定した場合は srclang 属性も定義する必要があります。
<track kind="subtitles" src="en.vtt" srclang="en">| 主な言語コード | |
|---|---|
| ja | 日本語 |
| en | 英語 |
| es | スペイン語 |
| de | ドイツ語 |
| zh | 中国語 |
その他の言語コード：国際規格 ISO 639 – Wikipedia
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
このサンプルでは、動画ファイルに英語と日本語の字幕をつけています。
HTML
<video controls width="400" src="sample.mp4">
<track kind="subtitles" src="en.vtt" srclang="en" label="英語" default>
<track kind="subtitles" src="jp.vtt" srclang="ja" label="日本語">
</video>en.vtt
WEBVTT
1
00:00:00.100 --> 00:00:02.000
English Subtitle
2
00:00:03.000 --> 00:00:05.000
3 seconds passed.
3
00:00:06.000 --> 00:00:08.000
6 seconds passed.
jp.vtt
WEBVTT
1
00:00:00.100 --> 00:00:02.000
字幕を表示します。
2
00:00:03.000 --> 00:00:05.000
3秒経過しました。
3
00:00:06.000 --> 00:00:08.000
6秒経過しました。
実行結果
対応ブラウザ
関連するタグ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
