HTML - track 要素

概要

名前
track
カテゴリー
なし
配置できる場所
audio 要素video 要素の子要素として、Flow contentよりも前に配置する。
コンテンツモデル
空要素のため、子ノードを持ちません。
説明
track 要素は、動画、または音声データの外部テキスト・トラックを指定するための要素です。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLTrackElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
103123612.1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
default103123612.14.4
kind103123612.14.4
label103123612.14.4
src103123612.14.4
srclang103123612.14.4
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
default
この属性は、別の track が適切であるとユーザの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの track 要素のみで使用できます。
kind
どのように使用するトラックであるかをを表します。省略した場合、デフォルトの種類は subtitles です。属性が存在しない場合は subtitles を使用します。属性に無効な値が含まれている場合は metadata を使用します。以下のキーワードを使用できます。
  • subtitles
    • 字幕は、視聴者が理解できないコンテンツの翻訳を提供します。
    • 字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。
  • captions
    • クローズドキャプションは書写、あるいは音声の翻訳を提供します。
    • これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。
    • 耳が不自由なユーザや音声をミュートしている場合に適しています。
  • descriptions
    • テキストによる動画コンテンツの説明です。
    • 目が不自由なユーザや動画を視聴できない場合に適しています。
  • chapters
    • チャプタータイトルは、ユーザがメディアリソースの操作を行う際に使用することを意図しています。
  • metadata
    • スクリプトが使用するトラック情報です。
label
使用可能なテキストトラックを一覧表示する際にブラウザが使用する、ユーザに見せるテキストトラックのタイトルです。
src
トラック (.vtt ファイル) のアドレスです。有効な URL であることが必要です。この属性は定義する必要があり URL の値は文書として track 要素の親要素である audio または videocrossorigin 属性を持たない限り同じオリジンを持たなければなりません。
srclang
テキストデータの言語です。kind 属性に subtitles を設定した場合は srclang 属性を定義しなければなりません。

サンプルコード

track 要素のサンプルコードは以下のとおりです。

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>
track 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
7
Shares:
0
Tag:
HTML
hatebu icon
hatebu