Element.onfullscreenchange

Element インターフェイスの onfullscreenchange プロパティは、 fullscreenchange イベントのイベントハンドラーで、要素が全画面モードへ移行するか、終了するときに発生します。

構文

targetDocument.onfullscreenchange = fullscreenChangeHandler;

fullscreenchange イベントのイベントハンドラーで、要素が全画面モードへ移行または終了したことを示します。

この例では fullscreenchange イベントのハンドラーである handleFullscreenChange() を作成します。この関数は event.target のチェックしてどの要素に対して呼び出されたのかを判別し、文書の fullscreenElement の値と要素を比較して、同じノードであるかどうかを確認します。

これを isFullscreen の値に設定して adjustMyControls() という関数に渡し、これがウィンドウ内が全画面モードで表示されているときにアプリのユーザーインターフェイスが最適に表示されるように調整する関数になると想像してください。

function toggleFullscreen() {
  let elem = document.querySelector("video");

  elem.onfullscreenchange = handleFullscreenChange;
  if (!document.fullscreenElement) {
    elem.requestFullscreen().then({}).catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

function handleFullscreenChange(event) {
  let elem = event.target;
  let isFullscreen = document.fullscreenElement === elem;

  adjustMyControls(isFullscreen);
}

仕様書

仕様書 状態 備考
Fullscreen API
onfullscreenchange の定義
現行の標準 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報