このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

HTMLMediaElement: loadeddata イベント

loadeddata イベントは、メディアの現在の再生位置のフレームの読み込みが完了したときに発生します。ふつうは最初のフレームです。

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

なお、このイベントはモバイルやタブレットにおいて、ブラウザーの設定でデータセーバーがオンになっていると発生しません。

例

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

addEventListener() の使用:

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

video.addEventListener('loadeddata', (event) => {
  console.log('Yay! The readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for the first time.');
});

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

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

video.onloadeddata = (event) => {
  console.log('Yay! The readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for the first time.');
};

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報