【Fullscreen API】動画の全画面表示の操作をJavaScriptで検知する

※本記事のコードは参考用です。使用前にご自身で動作確認をお願いします。

はじめに

「動画を全画面表示を検知したい」をいう事案が発生した際に、Fullscreen API（全画面API）の存在を初めて知ったのでその備忘録です。

Fullscreen API（全画面API）

Fullscreen API（全画面API）とは

Fullscreen API は、Webページ内の特定の要素（たとえば動画や画像）を、ユーザーの操作によって画面全体に拡大表示（＝全画面表示）するためのAPIです。別途調整は必要かと思いますが、基本的には動画や画像以外のHTMLでも利用できるようです。
日本語ドキュメントは以下です。
全画面 API - Web API | MDN

Fullscreen API（全画面API）の基本

メソッド / プロパティ

説明

element.requestFullscreen()

要素を全画面表示にする

document.exitFullscreen()

全画面表示を終了する

document.fullscreenElement

現在全画面表示されている要素（なければ null）

fullscreenchange

全画面の開始／終了時に発火するイベント

fullscreenerror

全画面化に失敗した時に発火

以下は、全画面表示の切り替えを検知するコード例です。
全画面になったときに動画を自動で再生します。

const video = document.getElementById('myVideo');

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('全画面に入りました');
    video.play();
  } else {
    console.log('全画面から出ました');
    video.pause();
  }
});

用途

  • 画像や動画に「全画面」ボタンをつけたい
  • 資料をWebで公開し、スライドを全画面化したい
  • 全画面表示になったときに、特定の処理を実行したい
    など

iOS Safariでの注意点

iOS Safari（iPhone）ではFullscreen APIが利用できないようで、注意が必要です。（2025年5月現在）
Can I Useでどのブラウザのバージョンがサポートしているか確認しましょう。
Fullscreen API | Can I use... Support tables for HTML5, CSS3, etc

参考