Fullscreen API requestFullscreen()メソッド

定義と使用法

requestFullscreen() フルスクリーンモードで要素を開くメソッド。

ヒント：使用してください exitFullscreen()メソッドフルスクリーンモードを解除します。

インスタンス

例1

フルスクリーンモードで<video>要素を表示します：

/* フルスクリーンモードで表示する要素（この例ではビデオ）を取得します：*/
var elem = document.getElementById("myvideo");
/* openFullscreen()関数を実行時に、フルスクリーンでビデオを開きます。
注意してください、異なるブラウザのプレフィックスを含めなければなりません、なぜならまだrequestFullscreen属性をサポートしていないからです */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* サファリ */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

自分で試してみてください

例2

HTMLページをフルスクリーンで開くには、document.documentElementを使用してdocument.getElementById("element")ではなくください。この例では、フルスクリーンを閉じるための閉じる関数も使用しています：

/* documentElement (<html>) をフルスクリーン表示するために取得 */
var elem = document.documentElement;
/* フルスクリーンで確認 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* サファリ */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* フルスクリーンを閉じる */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* サファリ */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

自分で試してみてください

例3

ページがフルスクリーンモードになっている場合、CSSでページのスタイルを設定することもできます：

/* サファリ */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 構文 */
:-ms-fullscreen {
  background-color: yellow;
}
/* 標準構文 */
:fullscreen {
  background-color: yellow;
}

自分で試してみてください

構文

HTMLElementObject.requestFullscreen()

パラメータ

ありません。

技術的な詳細

リターン値： リターン値はありません。

ブラウザのサポート

表の数字は、この方法を完全にサポートする最初のブラウザバージョンを示しています。

注釈：特定のプレフィックスが必要なブラウザがあります（括弧内を参照）:

クローム エッジ ファイアフォックス サファリ Opera
クローム エッジ ファイアフォックス サファリ Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)