JavaScript를 사용하면 버튼 클릭 한 번으로 동영상이나 특정 요소를 전체 화면 모드로 손쉽게 전환할 수 있습니다. 이 글에서는 Fullscreen API를 활용해 동영상을 전체 화면으로 여는 방법을 예제 코드와 함께 자세히 알아보겠습니다.
전체 화면 API란?
Fullscreen API는 웹 페이지의 특정 요소(동영상, 이미지, div 등)를 브라우저 창 전체에 표시할 수 있도록 지원하는 표준 JavaScript 인터페이스입니다. 핵심 메서드는 requestFullscreen()이며, 브라우저 호환성을 위해 벤더 접두사가 붙은 메서드들도 함께 처리해 주는 것이 좋습니다.
전체 화면 창 만들기 예제
다음은 버튼을 클릭하면 동영상이 전체 화면 모드로 전환되는 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
display: block;
padding: 10px;
margin: 10px;
background-color: rgb(81, 0, 128);
border: none;
color: white;
}
</style>
<body>
<h1>JavaScript 전체 화면 창 예제</h1>
<button class="openVideo">전체 화면으로 동영상 열기</button>
<video width="500px" controls id="minimizedVideo">
<source src="https://www.videvo.net/videvo_files/converted/2015_04/preview/Ocean_Waves_slow_motion_videvo.mov44965.webm">
</video>
<h2>위 버튼을 클릭하면 동영상이 전체 화면으로 전환됩니다</h2>
<script>
document.querySelector('.openVideo').addEventListener('click', fullscreenVideo);
var elem = document.getElementById("minimizedVideo");
function fullscreenVideo() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
}
else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
</script>
</body>
</html>코드 설명
예제의 핵심 로직은 다음과 같습니다.
- 버튼 클릭 이벤트 등록:
addEventListener('click', fullscreenVideo)를 통해 버튼 클릭 시fullscreenVideo함수가 실행됩니다. - 요소 선택:
document.getElementById()로 전체 화면으로 전환할 동영상 요소를 가져옵니다. - 브라우저 호환성 처리: 표준인
requestFullscreen()부터 시작해 Firefox(mozRequestFullScreen), Chrome/Safari(webkitRequestFullscreen), 구형 IE/Edge(msRequestFullscreen)까지 순차적으로 확인하여 지원되는 메서드를 호출합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
「전체 화면으로 동영상 열기」 버튼을 클릭하면 동영상이 아래와 같이 전체 화면 모드로 전환됩니다.
참고 사항
- 전체 화면 전환은 반드시 사용자의 클릭 같은 사용자 상호작용에 의해 트리거되어야 합니다. 페이지 로드 시 자동 실행은 대부분의 브라우저에서 차단됩니다.
- 전체 화면을 종료하려면
document.exitFullscreen()메서드를 사용하거나 사용자가 ESC 키를 누르면 됩니다. - iOS Safari의 경우 iPhone에서 요소 단위 전체 화면 API를 지원하지 않으므로, 동영상에는
webkitEnterFullscreen()을 사용하는 별도 처리가 필요할 수 있습니다.