VTTCue

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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 オブジェクトを値としてキューを追加します。

html

<video
  controls
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>

CSS

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