TextTrack: cuechange イベント

cuechange イベントは、 TextTrack が現在表示しているキューが変更されたときに発生します。このイベントは、もし表示されているものがあれば、 TextTrack および HTMLTrackElement の両方に発生します。

バブリング なし
キャンセル 不可
インターフェイス Event
イベントハンドラープロパティ GlobalEventHandlers.oncuechange

TextTrack 上で

cuechange イベントのリスナーを TextTrack に設定するには、 addEventListener() メソッドを使用します。

track.addEventListener('cuechange', function () {
  let cues = track.activeCues;  // 現在のキューの配列
});

あるいは、 oncuechange イベントハンドラ-プロパティを設定しても構いません。

track.oncuechange = function () {
  let cues = track.activeCues; // 現在のキューの配列
}

track 要素上で

基本となる TextTrack は、 track プロパティで識別されますが、現在表示されているキューが変更されるたびに cuechange イベントを受け取ります。これは、トラックがメディア要素に結び付けられていなくても発生します。

トラックがメディア要素に結び付けられている場合、 <track> 要素を <audio> または <video> 要素の子として使用すると、 cuechange イベントは HTMLTrackElement にも送信されます。

let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

また、oncuechange イベントハンドラーを使用することもできます。

let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
});

仕様書

仕様書 状態
HTML Living Standard
cuechange の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
cuechange eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 31IE ? Opera ? Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 31Opera Android 未対応 なしSafari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報