HTMLMediaElement: timeupdate イベント

timeupdate イベントは、currentTime 属性で示される時刻が更新されたときに発生します。

イベントの頻度はシステムの負荷に依存しますが、およそ 4Hz と 66Hz との間でスローされます (イベントハンドラーが実行するのに 250 ms 以上かかることはないと仮定します)。ユーザーエージェントはシステム負荷とその都度イベントを処理する平均コストに基づいて、イベントの頻度を変えることが推奨されているため、ユーザーエージェントがビデオのデコード中に快適に処理できるよりも頻繁に UI 更新が行われることはありません。

バブリング なし
キャンセル可能 不可
インターフェイス Event
対象 Element
既定のアクション なし
イベントハンドラープロパティ GlobalEventHandlers.ontimeupdate
仕様書 HTML5 media

例

これらの例は、 HTMLMediaElement の timeupdate イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作するときにメッセージを投稿します。なお、イベントの頻度はシステムの稼働状況に依存します。

addEventListener() の使用:

const video = document.querySelector('video');

video.addEventListener('timeupdate', (event) => {
  console.log('The currentTime attribute has been updated. Again.');
});

ontimeupdate イベントハンドラープロパティの使用:

const video = document.querySelector('video');

video.ontimeupdate = (event) => {
  console.log('The currentTime attribute has been updated. Again.');
};

仕様書

仕様書 状態
HTML Living Standard
timeupdate media event の定義		 現行の標準
HTML5
timeupdate media event の定義		 勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
timeupdate eventChrome 完全対応 3Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報

関連トピック