VTTCue
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
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="/shared-assets/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 |
ブラウザーの互換性
Loading…