--- title: 'HTMLMediaElement: durationchange イベント' slug: Web/API/HTMLMediaElement/durationchange_event tags: - Audio - HTMLMediaElement - Reference - Video - events translation_of: Web/API/HTMLMediaElement/durationchange_event ---

{{APIRef("HTMLMediaElement")}}

durationchange イベントは、duration 属性が更新されたときに発生します。

バブリング なし
キャンセル 不可
インターフェイス {{DOMxRef("Event")}}
対象 要素
既定のアクション なし
イベントハンドラプロパティ {{domxref("GlobalEventHandlers.ondurationchange")}}
仕様 HTML5 メディア

これらの例では、HTMLMediaElementdurationchange イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

AddEventListener() を使用する場合

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

video.addEventListener('durationchange', (event) => {
  console.log('理由はわかりませんが、動画の再生時間が変わりました。');
});

ondurationchange イベントハンドラプロパティを使用する場合

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

video.ondurationchange = (event) => {
  console.log('理由はわかりませんが、動画の再生時間が変わりました。');
};

仕様

仕様 状態
{{SpecName('HTML WHATWG', "media.html#event-media-durationchange", "durationchange media event")}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-durationchange", "durationchange media event")}} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("api.HTMLMediaElement.durationchange_event")}}

関連情報