JavaScript Fullscreen API

Fullscreen API

Fullscreen API は全画面 HTML 要素を処理するメソッドと属性を提供します。

インスタンス

全画面モードで <video> 要素を表示：

/* 全画面表示が必要な要素を取得します */
var elem = document.getElementById("myvideo");
/* openFullscreen() 函数を実行してビデオを全画面で表示します。requestFullscreen 属性をサポートしないブラウザのプレフィックスも含まれます。 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

実際に試してみてください

Fullscreen 属性とメソッド

属性 / メソッド 説明
exitFullscreen() 全画面モードから要素を解除します。
fullscreenElement 全画面モードの要素を返します。
fullscreenEnabled() 全画面モードでドキュメントを表示できる場合、true を返します。
requestFullscreen() 要素をフルスクリーンモードで開く。