몰입 형 경험을위한 전체 화면 API

전체 화면 API를 사용하면 웹 컨텐츠를 전체 화면으로 표시하여 비디오 및 게임과 같은 응용 프로그램의 침수를 향상시킬 수 있습니다. Element.RequestFullScreen ()을 사용하여 전체 화면을 요청하려면 전체 화면을 요청하고 전체 화면을 종료하려면 전체 화면 변경을 듣습니다. 상태 변경 사항을 얻으려면 전체 화면 변경을 듣습니다. 브라우저 호환성에주의를 기울이고 Mozrequestfullscreen, WebKitrequestfullscreen 등과 같은 접두사 방법에주의하십시오. 전체 화면 작동은 클릭 이벤트와 같은 사용자 제스처에 의해 트리거되어야합니다. 자동 호출은 금지됩니다. 실제 응용 프로그램에서 클래스 이름 스위칭은 플레이어, 게임, 프레젠테이션 및 사진 시청자 등에 적합한 UI 최적화와 결합 될 수 있으며, 합리적인 사용을 통해 사용자 경험을 크게 향상시킬 수 있습니다.

FullScreen API를 통해 웹 응용 프로그램은 전체 화면 모드에서 콘텐츠를 표시 할 수 있으므로 사용자가 더 몰입 형 경험을 제공합니다. 이것은 비디오 플레이어, 온라인 게임, 프레젠테이션 및 이미지 시청자와 같은 장면에 특히 유용합니다. 간단한 JavaScript 인터페이스를 통해 개발자는 페이지 요소를 제어하여 전체 화면 상태를 입력하거나 종료하여 사용자 집중력과 대화식 경험을 향상시킬 수 있습니다.

전체 화면 API를 사용하는 방법

전체 화면 API는 복잡하지 않으며 핵심 방법과 속성은 document 개체에 장착됩니다. 주로 다음과 같은 핵심 사항이 포함됩니다.

• 전체 화면을 요청하십시오 : element.requestFullscreen() 사용하여 요소를 전체 화면에 가져옵니다.
• 전체 화면 종료 : 전체 화면 모드를 종료하려면 document.exitFullscreen() 을 호출하십시오.
• 전체 스크린 상태 모니터링 : fullscreenchange 변경을 들여 전체 화면 상태 변경에 응답합니다.
• 현재 전체 화면 요소 : document.fullscreenElement 요소를 현재 전체 화면 상태에 있으며 없으면 null 반환합니다.

 const elem = document.getElementById ( '컨테이너');

// 전체 화면 기능을 입력하라는 요청 OPENFULLSCREEN () {
  if (elem.requestfullscreen) {
    elem.requestfullscreen ();
  }
}

// 전체 화면 기능 종료 closeFullScreen () {
  if (document.exitfullscreen) {
    document.exitfullscreen ();
  }
}

// 전체 화면 상태를 듣습니다. 문서를 변경합니다. AddeventListener ( 'fullScreenchange', () => {
  if (document.fullscreenElement) {
    Console.log ( '전체 화면 입력 :', document.fullscreenelement);
  } 또 다른 {
    Console.log ( '전체 화면 종료');
  }
});

브라우저 호환성 및 접두사 처리

최신 브라우저는 일반적으로 전체 화면 API를 지원하지만 일부 브라우저는 여전히 접두사 방법을 사용해야합니다. 호환성을 보장하려면 판단하고 캡슐화하는 것이 좋습니다.

 함수 launchUllScreen (요소) {
  if (element.requestfullscreen) {
    요소 .requestfullscreen ();
  } else if (element.MozRequestFullScreen) {// firefox
    요소 .mozRequestFullScreen ();
  } else if (element.webkitrequestfullscreen) {// chrome, safari, opera
    element.webkitrequestfullscreen ();
  } else if (element.msrequestfullscreen) {// ie/edge
    요소 .mmsrequestfullscreen ();
  }
}

함수 exitfullscreen () {
  if (document.exitfullscreen) {
    document.exitfullscreen ();
  } else if (document.MozCanCelfullScreen) {
    document.mozcancelfullscreen ();
  } else if (document.WebKiteXitfullScreen) {
    document.webkitexitfullscreen ();
  } else if (document.msexitfullscreen) {
    document.msexitfullscreen ();
  }
}

사용자 제스처 제한 및 보안 정책

보안 및 사용자 경험 고려 사항의 경우 브라우저는 사용자 제스처 (예 : 클릭, 터치)에 의해 전체 화면 작업을 트리거해야하며 페이지에서 자동으로 수행 할 수 없습니다. 예를 들어 다음 코드는 적용되지 않습니다.

 // ❌ 유효하지 않음 : 자동으로 window.onload = () => {
  elem.requestfullscreen ();
};

그리고 이것은 괜찮습니다 :

 // ✅ 유효 : 사용자 클릭 트리거 버튼을 클릭하십시오 .adeventListener ( 'click', () => {
  elem.requestfullscreen ();
});

또한 일부 브라우저는 전체 화면을 입력 할 때 프롬프트 표시 줄을 표시하여 사용자가 Esc 또는 F11 눌러 종료 할 수 있습니다.

실제 응용 시나리오에 대한 제안

• 비디오 플레이어 : "전체 화면"버튼을 클릭하고 전체 화면에서 재생 영역을 표시합니다. 시청 경험을 향상시키기 위해 몇 초 후에 제어 막대를 숨기고 페이드를 꺼내십시오.
• 온라인 게임 : 게임을 시작하기 전에 사용자에게 버튼을 클릭하여 실수로 터치하고 종료하지 않도록 전체 화면을 입력하라는 메시지를 표시하십시오.
• 데모 시스템 : 키보드 이벤트 (예 : 화살표 키를 돌리는 등)와 결합하여 전체 화면에서보다 집중된 브라우징 경험을 제공합니다.
• 이미지 뷰어 : 이미지를 클릭하고 확대하고 왼쪽 및 오른쪽 화살표 전환을 지원하여 전체 화면으로 표시합니다.

전체 화면이면 UI를 동적으로 조정할 수도 있습니다.

 document.addeventListener ( 'fullScreenchange', () => {
  const isinfullscreen = !! document.fullscreenElement;
  document.body.classlist.toggle ( 'FullScreen-Mode', isinfullscreen);
  // 탐색 표시 줄을 숨기고 글꼴을 조정할 수 있습니다.});

기본적으로 그게 다야. 전체 화면 API는 사용하기 간단하지만 특정 시나리오에서 사용자 경험을 크게 향상시킬 수 있습니다. 몰입 형 기능은 사용자 트리거 제한 및 호환성 처리에주의를 기울이는 한 안전하고 안정적으로 구현할 수 있습니다.

위 내용은 몰입 형 경험을위한 전체 화면 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!