HTML5 フルスクリーン API_html5 チュートリアル スキルの詳細な紹介

実際の Web アプリケーションでは、JavaScript がますます強力になってきています。

FullScreen API は、シンプルかつ強力な新しい JavaScript API です。FullScreen を使用すると、ユーザーからの全画面表示をプログラムでリクエストでき、操作が完了すると、いつでも全画面状態を終了できます。

オンライン デモンストレーション デモ: フルスクリーン API の例

(このデモでは、起動、非表示、ダンプを実行して関連プロパティを表示でき、Chrome コンソールを通じてログ情報を表示できます。)

全画面モードを有効にする

フルスクリーン API の requestFullscreen メソッドは、一部の古いブラウザでは依然としてプレフィックスの付いたメソッド名を使用しているため、検出と判断が必要になる場合があります:
(プレフィックスが付いている場合は、各ブラウザ カーネルが汎用ではないことを意味します。)

コードをコピーします

コードは次のとおりです:

// サポートされているものを検索しますメソッドを呼び出し、フルスクリーンを必要とする要素を使用します。
関数 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"));
このメソッドを呼び出すと、フルスクリーンで表示する必要がある DOM 要素を取得します。場合によっては、ユーザーの同意が必要になる場合があります (ブラウザ自体がユーザーと対話します)。ユーザーが拒否すると、全画面表示が不完全になる可能性があります。

ユーザーが全画面表示に同意すると、ツールバーとその他のブラウザ コンポーネントが非表示になり、ドキュメント フレームの幅と高さが画面全体に広がります。

全画面モードを終了します

exitFullscreen メソッドを使用して、ブラウザを全画面表示から終了し、元のレイアウトに戻ります。このメソッドは、一部の古いブラウザでのプレフィックス メソッドもサポートしています。 > コードをコピーします

コードは次のとおりです:

// 全画面表示を終了

function exitFullscreen() {

if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozExitFullScreen) { document.mozExitFullScreen(); } else if(document.webkitExitFullscreen) {

;

}

}


// 全画面表示を終了するメソッドを呼び出します。


注意: exitFullscreen はドキュメント オブジェクトを通じて呼び出されます。通常の DOM 要素は使用しません。


全画面のプロパティとイベント


悪いニュースは、これまでのところ、全画面イベントとメソッドにはまだ接頭辞が付いていることです。良いニュースは、間もなくすべての主要なブラウザがそれらをサポートすることです。

1.document.fullscreenElement: 現在全画面状態にある要素。
2.document.fullscreenEnabled: 現在全画面が利用可能かどうかをマークします。

全画面モードを開始または終了すると、fullscreenchange イベントがトリガーされます:

コードをコピーします

コードは次のとおりです:

var fullscreenElement =
document.fullscreenEnabled

|| document.mozFullscreenElement

|| document.webkitFullscreenElement; var fullscreenEnabled || document.webkitFullscreenEnabled; 🎜>全画面メソッドを初期化するときに、どのイベントを監視する必要があるかを検出できます。

全画面 CSS


ブラウザには、便利な全画面 CSS 制御ルールがいくつか用意されています。





コードをコピーします

コードは次のとおりです:

/* html */

:-webkit-full-screen {

/* プロパティ */
}
:-moz-fullscreen {

/* property * /

} :fullscreen { /* プロパティ */

}

/* より深い要素 */
: -webkit -full-screen video {
width: 100%;
height: 100%;


/* 背景のスタイル設定 */
::backdrop {
/* プロパティ */
}


WebKit では特殊な処理が必要な場合があるため、マルチメディアを扱う場合には上記のコードが必要になる場合があります。

フルスクリーン API は非常にシンプルで非常に便利だと思います。私がこの API を初めて見たのは、MDN の BananaBread デモ というフルクライアントの一人称シューティング ゲームでした。これは本当に素晴らしい方法です。全画面モードを使用するのに最適です。

全画面 API は、全画面モードを開始および終了する方法を提供し、全画面ステータスの変化を監視するための対応するイベントを提供するため、すべての側面が一貫しています。

この素晴らしい API を覚えておいてください - 将来のある時点で間違いなく役立つでしょう!