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

// サポートされているものを検索しますメソッドを呼び出し、フルスクリーンを必要とする要素を使用します。
関数 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 はドキュメント オブジェクトを通じて呼び出されます。通常の DOM 要素は使用しません。


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


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

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

全画面 CSS


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





コードをコピーします

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


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


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

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

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

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