没入型エクスペリエンスのためのフルスクリーンAPI

フルスクリーンAPIを使用すると、Webコンテンツをフルスクリーンに表示し、ビデオやゲームなどのアプリケーションの没入を改善できます。 element.requestfullscreen（）を使用して、フルスクリーン、document.exitfullscreen（）を要求してフル画面を終了し、状態の変更を取得するためにフル画面の変更を聞いてください。ブラウザの互換性、およびmozRequestfullscreen、webkitrequestfullscreenなどのプレフィックスメソッドに注意してください。クリックイベントなどのユーザージェスチャーによってフルスクリーンの操作をトリガーする必要があります。自動通話は禁止されています。実際のアプリケーションでは、クラス名の切り替えは、プレイヤー、ゲーム、プレゼンテーション、画像視聴者などに適したUIの最適化と組み合わせることができ、ユーザーエクスペリエンスは妥当な使用を通じて大幅に改善できます。

Fullscreen APIを使用すると、Webアプリケーションがフルスクリーンモードでコンテンツを表示できるようになり、ユーザーがより没入型のエクスペリエンスをもたらします。これは、ビデオプレーヤー、オンラインゲーム、プレゼンテーション、画像視聴者などのシーンに特に便利です。シンプルなJavaScriptインターフェイスを介して、開発者はページ要素を制御してフル画面状態を入力または終了し、ユーザーの集中力とインタラクティブエクスペリエンスを改善できます。

フルスクリーンAPIの使用方法

フルスクリーンAPIは複雑ではなく、コアメソッドとプロパティがdocumentオブジェクトに取り付けられています。主に次の重要なポイントが含まれます。

• フルスクリーンをリクエスト： element.requestFullscreen()を使用して、要素をフルスクリーンに入力します。
• フル画面を終了： document.exitFullscreen()を呼び出して、フルスクリーンモードを終了します。
• フルスクリーン状態の監視： fullscreenchange変更を聞いて、フルスクリーン状態の変更に応答します。
• 現在のフルスクリーン要素： document.fullscreenElement現在フルスクリーン状態に要素を返し、なしでnullを返します。

 const elem = document.getElementById（ 'container'）;

//フルスクリーン関数を入力するリクエストOpenFullScreen（）{
  if（elem.requestfullscreen）{
    elem.requestfullscreen（）;
  }
}

//フルスクリーン関数CLOSEFULLSCREEN（）{
  if（document.exitfullscreen）{
    document.exitfullscreen（）;
  }
}

//フルスクリーンの状態変更document.addeventlistener（ 'fullscreenchange'、（）=> {
  if（document.fullscreenelement）{
    console.log（ 'フルスクリーンを入力：'、document.fullscreenelement）;
  } それ以外 {
    console.log（ 'exit full screen'）;
  }
}）;

ブラウザの互換性とプレフィックス処理

最新のブラウザは一般にフルスクリーンAPIをサポートしていますが、一部のブラウザはプレフィックスメソッドを使用する必要があります。互換性を確保するために、判断してカプセル化することをお勧めします。

 function launchfullscreen（element）{
  if（element.requestfullscreen）{
    element.requestfullscreen（）;
  } else if（element.mozrequestfullscreen）{// firefox
    element.MozRequestfullscreen（）;
  } else if（element.webkitrequestfullscreen）{// Chrome、Safari、Opera
    element.WebKitRequestfullscreen（）;
  } else if（element.msrequestfullscreen）{// ie/edge
    element.msRequestfullscreen（）;
  }
}

関数exitfullscreen（）{
  if（document.exitfullscreen）{
    document.exitfullscreen（）;
  } else if（document.mozcancelfullscreen）{
    document.mozcancelfullscreen（）;
  } else if（document.webkitexitfullscreen）{
    document.webkitexitfullscreen（）;
  } else if（document.msexitfullscreen）{
    document.msexitfullscreen（）;
  }
}

ユーザーのジェスチャーの制限とセキュリティポリシー

セキュリティおよびユーザーエクスペリエンスの考慮事項のために、ブラウザでは、ユーザージェスチャー（クリック、タッチなど）によってフルスクリーン操作をトリガーする必要があり、ページで自動的に実行できないことが必要です。たとえば、次のコードは有効になりません。

 //
  elem.requestfullscreen（）;
};

そして、これは大丈夫です：

 //有効：ユーザーをクリックします[トリガー]ボタンをクリックします。addeventlistener（ 'click'、（）=> {
  elem.requestfullscreen（）;
}）;

さらに、一部のブラウザは、フル画面に入るときにプロンプトバーを表示し、ユーザーがEscまたはF11押して終了できるようにします。

実用的なアプリケーションシナリオの提案

• ビデオプレーヤー：「フル画面」ボタンをクリックして、フル画面に再生領域を表示します。視聴体験を改善するために、数秒後にコントロールバーを隠してフェードアウトします。
• オンラインゲーム：ゲームを開始する前に、ユーザーにボタンをクリックしてフル画面を入力するように求めて、誤って触れて終了しないようにします。
• デモシステム：キーボードイベント（矢印キーを回すなど）と組み合わせて、フルスクリーンでより焦点を絞ったブラウジングエクスペリエンスを提供します。
• 画像ビューア：画像をクリックしてズームインして全画面に表示し、左右の矢印の切り替えをサポートします。

フル画面のときにUIを動的に調整することもできます。

 document.addeventlistener（ 'fullscreenchange'、（）=> {
  const isinfullscreen = !! document.fullscreenelement;
  document.body.classlist.toggle（ 'fullscreen-mode'、isinfullscreen）;
  //ナビゲーションバーを非表示にするか、フォントなどを調整できます。}）;

基本的にそれだけです。フルスクリーンAPIは簡単に使用できますが、特定のシナリオでのユーザーエクスペリエンスを大幅に改善できます。没入型機能は、ユーザーがトリガーされた制限と互換性処理に注意を払う限り、安全かつ確実に実装できます。

以上が没入型エクスペリエンスのためのフルスクリーンAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。