VTTCue
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
VTTCue
インターフェイスは WebVTT(メディアプレゼンテーションに関するテキストトラック)を処理するための API の一部で、特定の <track>
要素に関連付けられたテキストトラックを記述および制御します。
コンストラクター
VTTCue()
-
指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された
VTTCue
オブジェクトを返します。
インスタンスプロパティ
このインターフェイスには TextTrackCue
から継承したプロパティもあります。
VTTCue.region
-
キューが描画される動画のサブ領域を説明する
VTTRegion
オブジェクト。 割り当てられていない場合はnull
。 VTTCue.vertical
-
キューの書き込み方向を表す列挙型を返します。
VTTCue.snapToLines
-
VTTCue.line
属性が整数の行数または動画サイズのパーセントである場合、true
を返します。 VTTCue.line
-
キューの行位置を返します。 これは、文字列
auto
またはその解釈がVTTCue.snapToLines
の値に依存する数値になります。 VTTCue.lineAlign
-
VTTCue.line
の配置を表す列挙型を返します。 VTTCue.position
-
行内のキューのインデントを返します。 これは、文字列
auto
またはVTTCue.region
のパーセント値、またはVTTCue.region
がnull
の場合は動画サイズです。 VTTCue.positionAlign
-
キューの配置を表す列挙型を返します。 これは
VTTCue.position
が何に固定されているかを決定するために使用されます。 VTTCue.size
-
キューのサイズを表す
double
型を動画サイズのパーセントで返します。 VTTCue.align
-
キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。
VTTCue.text
-
キューの内容を含む文字列を返します。
メソッド
getCueAsHTML()
-
キューのテキストを
DocumentFragment
として返します。
例
HTML
次の例は、新しい TextTrack
を動画に追加し、次に TextTrack.addCue()
メソッドを使用して VTTCue
オブジェクトを値としてキューを追加します。
<video
controls
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>
CSS
video {
width: 420px;
height: 300px;
}
JavaScript
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
console.log(track.cues);
結果
仕様書
Specification |
---|
WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |
ブラウザーの互換性
BCD tables only load in the browser