コードコピーは次のとおりです。
//さまざまなブラウザを判断し、正しい方法を見つけます
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( "VideoLement"));
フル画面に表示するページ要素のフル画面メソッドを呼び出すと、ブラウザウィンドウがフルスクリーンになりますが、ユーザーは最初にフル画面モードを許可するようにリクエストします。ユーザーはフルスクリーンモードを拒否する可能性が高いことに注意してください。ユーザーがフルスクリーンモードを実行すると、ブラウザのツールバーとその他のボタンメニューが非表示になり、ページが画面全体をカバーします。
フルスクリーンモードを終了します
このExitfullscreenメソッド(ブラウザのプレフィックスも必要です)により、ブラウザはフルスクリーンモードを終了し、通常モードになります。
コードコピーは次のとおりです。
//ブラウザタイプを決定します
関数exitfullscreen(){
if(document.exitfullscreen){
document.exitfullscreen();
} else if(document.mozcancelfullscreen){
document.mozcancelfullscreen();
} else if(document.webkitexitfullscreen){
document.webkitexitfullscreen();
}
}
//フルスクリーンモードを終了します!
exitfullscreen();
Exitfullscreenは、フル画面を起動するときに渡されるオブジェクトではなく、ドキュメントオブジェクトによってのみ呼び出されることに注意する必要があります。
フルスクリーンのプロパティとイベント
残念ながら、イベントのフル画面プロパティと関連する方法には、ブラウザのプレフィックスも必要ですが、これはすぐに必要ではないと思います。
1.document.fullscreenelement:フルスクリーンWebページ要素。
2.document.fullscreenEnabled:現在フル画面にあるかどうかを判断します。
FullScreenchangeイベントは、フルスクリーンが開始または終了されるとトリガーされます。
コードコピーは次のとおりです。
var fullscreenelement.fullscreenelement ||。
var fullScreenEnabled.fullscreenEnabled ||。
上記の方法を使用して、このイベントにブラウザタイプを決定することもできます。
フルスクリーンスタイルのCSS
さまざまなブラウザは、フルスクリーンモードで非常に便利なCSSスタイルのルールを提供します。
次のようにコードをコピーします:: -webkit-full-screen {
/ *プロパティ */
}
:-moz-full-screen {
/ *プロパティ */
}
:-ms-fullscreen {
/ *プロパティ */
}
:フルスクリーン{ / *pre-spec * /
/ *プロパティ */
}
:fullscreen { / * spec * /
/ *プロパティ */
}
/ *より深い要素 */
:-webkit-full-screenビデオ{
幅:100%;
高さ:100%;
}
/*背景のスタイリング*/
::背景{
/ *プロパティ */
}
:: -MS-BackDrop {
/ *プロパティ */
}
場合によっては、WebKitスタイルにいくつかの問題があり、これらのスタイルをシンプルに保つことをお勧めします。
これらのフルスクリーンAPIは非常にシンプルで非常に便利です。 MDNのBananabreadデモでこのAPIを初めて見たとき、それはたまたまフルスクリーンだった撮影ゲームで、イベントを使用してフルスクリーン状態を検出しました。これらの有用なAPIを覚えておいてください。必要なときに拾うことができます。