JavaScriptは各種ブラウザのフルスクリーンモードを制御する方法、属性とイベントの紹介

//        ，       
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
//     !
launchFullScreen(document.documentElement); //     
launchFullScreen(document.getElementById("videoElement")); //       

フルスクリーン表示したいページ要素に対してフルスクリーンメソッドを呼び出すと、ブラウザウィンドウがフルスクリーンになりますが、先にフルスクリーンモードを許可するようにユーザに要求します。注意したいのですが、ユーザはフルスクリーンモードを拒否する可能性が高いです。フルスクリーンモードを実行すると、ブラウザのツールバーなどのボタンメニューが表示されなくなり、画面全体がカバーされます。
フルスクリーンモードを終了
このexitFulscreenメソッドは、ブラウザのプレフィックスを追加する必要があります。ブラウザはフルスクリーンモードを終了し、通常モードになります。

//        
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
//       !
exitFullscreen();

注意したいのは、exit Fulscreenは、フルスクリーン起動時に入ってきたオブジェクトではなく、documentオブジェクトでしか起動できません。
フルスクリーンのプロパティとイベント
残念なことに、フルスクリーン属性とイベントの関連方法もブラウザプレフィックスを追加する必要がありますが、すぐにこのようにする必要がないと信じています。
1.document.fullScrenElement：フルスクリーンで表示されるウェブページの要素。2.document.fullScrenEnabled：現在フルスクリーン状態にあるかどうかを判断する。
フルスクリーニングイベントはフルスクリーン起動またはフルスクリーン終了時にトリガされます。

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

上記のブラウザの種類を判断する方法を使って、このイベントにプレフィックスを付けることもできます。
フルスクリーンスタイルCSS
各種ブラウザは非常に有用なフルスクリーンモード時のcssスタイルルールを提供しています。

:-webkit-full-screen {
  /* properties */
}
:-moz-full-screen {
  /* properties */
}
:-ms-fullscreen {
  /* properties */
}
:full-screen { /*pre-spec */
  /* properties */
}
:fullscreen { /* spec */
  /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}
/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

場合によってはWebKitスタイルに問題があります。これらのスタイルを簡潔にしたほうがいいです。
これらの全画面APIは超簡単で、しかも超便利です。私は初めてMDN's Banana Bread demoでこのAPIを見ました。銃撃ゲームです。ちょうどフルスクリーン化が必要です。それはイベントモニターを使ってフルスクリーン状態を検出します。これらの使いやすいAPIを覚えてください。必要なときは手当たり次第に取ってきます。