索引

TRACK 要素

　　動画や音声と同期するテキストトラックの埋め込み

［カテゴリー］

なし

［要素を使用できる文脈］

メディア関連要素の中（フローコンテンツの前）

［コンテンツモデル］

空

［コンテンツ属性］

グローバル属性
kind ：列挙属性

subtitles　　字幕（デフォルト）
captions　　聴覚障害者向け字幕
descriptions　　動画などの内容（音声として出力されることを想定）
chapters　　章ごとのタイトル
metadata　　クライアント側スクリプトで用いられるデータ

src ：テキストトラックの URI
srclang ：テキストトラックの言語
label ：テキストトラックのラベル
default ：デフォルトとなるテキストトラック

［DOM インタフェース］

interface HTMLTrackElement : HTMLElement {
           attribute DOMString kind;
           attribute DOMString src;
           attribute DOMString srclang;
           attribute DOMString label;
           attribute boolean default;

  const unsigned short NONE = 0;
  const unsigned short LOADING = 1;
  const unsigned short LOADED = 2;
  const unsigned short ERROR = 3;
  readonly attribute unsigned short readyState;

  readonly attribute TextTrack track;
};

［使用例］

使用例１とそのソースコード：　コントロールパネルを表示させていると共に，複数形式の動画から選択できるように SOURCE 要素を使用して動画を指定している．また，TRACK 要素を使用して，画面に字幕を表示させている（コントロールパネルの「 CC 」をクリックする必要がある）．なお，setumei.vtt の内容は以下に示すとおりである．
WEBVTT FILE 1 00:00:00.500 --> 00:00:02.000 私の研究室の状況を 2 00:00:02.500 --> 00:00:06.000 携帯のカメラで撮ったものです．

<!DOCTYPE HTML> <HTML> <HEAD>  <TITLE>VIDEO 要素の使用例</TITLE>  <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> </HEAD> <BODY CLASS="white" STYLE="text-align: center"> <H1>VIDEO 要素の使用例</H1> <VIDEO CONTROLS POSTER="MyRoom.jpg" WIDTH="400" HEIGHT="250"> <SOURCE SRC="MyRoom.mp4"> <TRACK KIND="subtitles" SRC="setumei.vtt"></TRACK> </VIDEO> </BODY> </HTML>

静岡理工科大学

菅沼ホーム

HTML 目次

索引