trackの使い方についてまとめ

trackの概要

trackはaudio要素やvideo要素に対して字幕や時間指定されたテキストトラック(字幕など)を指定できます。

trackのカテゴリー

コンテンツカテゴリー

  • コンテンツカテゴリなし

    コンテンツモデル

    • コンテンツモデルなし

trackに入れられるタグ一覧

タグ早見表

なし(空要素)

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

trackに使える属性

属性とは<track> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード

trackで使うその他属性

src 概要 埋め込むコンテキストのパスを指定する属性です。
属性の値 埋め込むページのURL
kind 概要 トラック情報の種別を指定する属性です。
属性の値 subtitles、captions、descriptions、chapters、metadatas
srclang 概要 情報の言語を指定できます。
属性の値 ja、enなど
label 概要 トラック指定の際にユーザに見せるテキストトラックのタイトルを指定できます。
属性の値 文字列
default 概要 複数のトラックが存在する時などのデフォルトのTトラックを指定できます。
属性の値 default

スポンサードサーチ

<track>の基本的な書き方

<video controls width="320">
<source src="/wp-content/video.mp4" type="video/mp4">
<track kind="description" srclang="ja" src="/wp-content/track.vtt">
ご使用のブラウザではこの動画を再生できません。
</video>

ブラウザ対応状況

ブラウザの対応(PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応(SP)
Chrome あり
Safari あり
Samsung Internet あり

WORK REQUEST

CONTACT