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> 要素に関連付けられたテキストトラックを記述および制御します。

EventTarget TextTrackCue VTTCue

コンストラクター

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.regionnull の場合は動画サイズです。

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

js
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