참고: https://www.tutorialspoint.com/how-to-create-fullscreen-api-using-javascript
Fullscreen API는 사용자에게 전체 화면 표시를 요청하고 원할 때 전체 화면을 종료할 수 있게 하는 브라우저 API입니다.
Fullscreen API를 사용하는 방법은 간단합니다. 먼저 사용 중인 브라우저가 Fullscreen API를 지원하는지 확인해야 합니다. 코드로 확인하는 방법은 document 객체에 Fullscreen API의 enabled 속성이 있는지 확인하는 것 입니다.
브라우저가 Fullscreen API를 지원하지 않는 경우에도 새 브라우저 창 열기와 같은 방법으로 전체 화면을 제공할 수 있습니다. 브라우저가 Fullscreen API를 지원한다면 사용자에게 전체 화면 표시를 요청하는 기능을 만들 수 있습니다. 이 기능을 만들 때 주의해야 할 점은 사용자의 클릭에 의해 전체 화면을 요청해야 한다는 점 입니다. 임의의 코드로 전체 화면 실행은 불가합니다.
문법
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
}페이지를 전체 화면으로 열기 위해서는 requestFullscreen() 메소드를 사용해야 합니다.
사용 방법
requestFullscreen() 메소드를 사용하면 사용자에게 전체 화면 표시를 요청합니다. 이 메소드는 HTML의 모든 요소에서 호출할 수 있지만 documentElement에서 호출하는게 일반적 입니다. document.documentElement를 사용하여 페이지의 전체를 가지는 요소에 접근한 다음 requestFullscreen() 메소드를 사용하여 페이지를 전체 화면 모드로 엽니다.
다음의 예제에서는 브라우저의 화면을 전체 화면으로 열기 위해 "Enter Full Screen" 버튼을 만들어 보겠습니다. 사용자가 버튼을 클릭하면 document는 fullscreenchange 이벤트를 수신합니다. 이 이벤트는 document가 전체 화면 모드로 바뀌거나 종료되는 타이밍에 트리거됩니다.
예제 1: 전체 화면으로 페이지 열기
아래 예제는 버튼을 클릭하면 전체 화면 모드로 창을 여는 JavaScript 코드 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Full Screen API with JavaScript</h1>
<p>Click on the "Enter Full Screen" button to open in Fullscreen mode</p>
<button onclick="EnterFullScreen();">
Enter Full Screen
</button>
<button onclick="ExitFullScreen();">Exit Full Screen</button>
<p>Click on the "Exit Full Screen" button or press "Esc" key to exit fullscreen</p>
<script>
function EnterFullScreen() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
}
}
function ExitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
</script>
</body>
</html>위의 코드를 실행하면 아래와 같은 화면을 볼 수 있습니다. "Enter Full Screen"을 누르면 페이지가 전체 화면으로 변경되고 "Exit Full Screen"을 누르면 전체 화면이 종료됩니다.
예제2: 전체 화면으로 비디오 열기
다음의 예제는 JavaScript의 Fullscreen API를 통해 비디오를 전체 화면으로 여는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Full Screen API with JavaScript</h1>
<p>Click on the "Enter Full Screen" button to open video in full screen mode</p>
<button onclick="EnterFullScreen();">
Enter Full Screen
</button>
<p>Press "Esc" key to exit fullscreen</p>
<iframe id="myvideo" src="https://www.youtube.com/embed/Q4O6yxUC_8g?enablejsapi=1"></iframe>
<script>
var elem = document.getElementById("myvideo");
function EnterFullScreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
}
</script>
</body>
</html>위의 스크립트에서는 HTML의 iframe 요소를 가져와서 requestFullScreen() 메소드를 호출해 비디오를 전체 화면으로 열도록 했습니다.
브라우저 호환성
Fullscreen API는 Internet Explorer, Firefox, Chrome, Safari 및 Opera를 포함한 주요 브라우저가 지원합니다. 하지만 Fullscreen API는 비교적 새로운 API 이므로 변경될 수도 있습니다.
Fullscreen API를 사용하면 여러 가지 장점이 있습니다. 첫째, 사용자에게 보다 몰입감 있는 경험을 제공할 수 있습니다. 둘째, 산만함을 줄이고 집중력을 향상시키는 데 도움이 될 수 있습니다. 마지막으로 독특한 시각 효과를 만드는 데 사용할 수 있습니다.
반면 잠재적인 단점도 있습니다. 첫째, 광고주 및 기타 제3자 콘텐츠 제공자에 의해 악용될 수 있습니다. 둘째, 전체 화면 모드와 전체 화면이 아닌 모드에서 모두 잘 작동하는 사용자 인터페이스를 설계하기 어려울 수 있습니다. 마지막으로 일부 사용자는 전체 화면 환경이 혼란스러울 수 있습니다.
Fullscreen API는 독특하고 몰입도 높은 사용자 경험을 만드는 데 사용할 수 있는 강력한 도구입니다. 그러나 Fullscreen API를 책임감 있게 사용하고 자신의 웹 애플리케이션에 구현하기 전에 잠재적인 단점을 충분히 고려해보는 것이 중요합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 마우스 이벤트 (mouse event) (7) | 2023.06.12 |
|---|---|
| [javascript] 자바스크립트 localStroage (12) | 2023.06.08 |
| [javascript] HTML 제곱 지수 위첨자 (sup) (7) | 2023.06.08 |
| [javascript] 자바스크립트 BigInt (9) | 2023.06.07 |
| [javascript] 자바스크립트 객체 속성 지우기 (delete) (6) | 2023.06.07 |
댓글