HTML5 전체 화면 API_html5 튜토리얼 기술에 대한 자세한 소개

점점 더 많은 실제 웹 애플리케이션에서 JavaScript는 점점 더 강력해지고 있습니다.

FullScreen API는 간단하고 강력한 새로운 JavaScript API입니다. FullScreen을 사용하면 프로그래밍 방식으로 사용자에게 전체 화면 표시를 요청할 수 있으며 상호 작용이 완료되면 언제든지 전체 화면 상태를 종료할 수 있습니다.

온라인 데모 데모: 전체 화면 API 예

(이 데모에서는 실행, 숨기기, 덤프를 통해 관련 속성을 표시할 수 있으며, 크롬 콘솔을 통해 로그 정보를 볼 수 있습니다.)

전체 화면 모드 활성화

전체 화면 API requestFullscreen 메소드는 일부 오래된 브라우저에서 여전히 접두사가 있는 메소드 이름을 사용하므로 감지 및 판단이 필요할 수 있습니다.
(접두사가 있으면 각 브라우저 커널이 보편적이지 않음을 의미합니다.)

코드 복사

코드는 다음과 같습니다.

// 지원되는 항목 찾기 메소드를 사용하고 전체 화면이 필요한 요소를 사용합니다.
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("videoElement"))

전체 화면으로 표시해야 하는 DOM 요소를 매개변수로 사용하면 창이 전체 화면 상태로 전환될 수 있습니다(브라우저 자체가 사용자와 상호작용하는 경우). 사용자가 거부할 경우 전체화면이 여러 가지로 나타날 수 있습니다.

사용자가 전체 화면 전환에 동의하면 도구 모음 및 기타 브라우저 구성 요소가 숨겨지고 문서 프레임의 너비와 높이가 전체 화면에 걸쳐 표시됩니다.

전체 화면 모드 종료

exitFullscreen 메소드를 사용하면 브라우저를 전체 화면에서 종료하고 원래 레이아웃으로 돌아갈 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// 전체 화면 종료
functionexitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen()
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen() ;
}
}


// 전체 화면 종료 메소드를 호출하세요.
exitFullscreen(); 문서 개체를 통해 호출 - 일반 DOM 요소를 사용하지 않음

전체 화면 속성 및 이벤트

나쁜 소식은 아직까지는 전체 화면 이벤트와 메서드가 여전히 앞에 붙어 있다는 것입니다. 좋은 소식은 곧 모든 주요 브라우저에서 이를 지원할 것이라는 점입니다. 1.document.fullscreenElement: 현재 전체 화면 상태인 요소.

2.document.fullscreenEnabled: 현재 전체 화면을 사용할 수 있는지 여부를 표시합니다.

전체 화면 모드에 들어가거나 나갈 때 fullscreenchange 이벤트가 트리거됩니다.

코드 복사

코드는 다음과 같습니다.var fullscreenElement =

document.fullscreenEnabled

|| document.webkitFullscreenElement;

var fullscreenEnabled
|| document.webkitFullscreenEnabled; 🎜>

전체 화면 방식을 초기화하면 어떤 이벤트를 모니터링해야 하는지 알 수 있습니다.


전체 화면 CSS


브라우저는 유용한 전체 화면 CSS 제어 규칙을 제공합니다.

코드 복사

코드는 다음과 같습니다.

/* html */ :-webkit-full-screen { /* 속성 */ } :-moz-fullscreen {

/* 속성 * /

}

:fullscreen {
/* 속성 */
}


/* 심층 요소 */
: -webkit -전체 화면 비디오 {
너비: 100%;
높이: 100%
}


/* 배경 스타일 지정 */
::backdrop {
/* 속성 */
}


어떤 경우에는 WebKit에 특별한 처리가 필요하므로 멀티미디어를 다룰 때 위의 코드가 필요할 수 있습니다.

전체 화면 API는 매우 간단하고 매우 유용하다고 생각합니다. 이 API를 처음 본 것은 MDN의 BananaBread 데모라는 전체 클라이언트 1인칭 슈팅 게임에서였습니다. 정말 좋은 방법이었습니다. 전체 화면 모드를 사용하는 경우입니다.

전체 화면 API는 전체 화면 모드를 시작하고 종료하는 방법을 제공하고 해당 이벤트를 제공하여 전체 화면 상태의 변화를 모니터링하므로 모든 측면이 일관됩니다.

이 훌륭한 API를 기억하세요. 미래의 어느 시점에서는 확실히 유용할 것입니다!