자바스크립트를 통한 HTML5 비디오 풀스크린 모드 제어

10 Nov 2023

HTML5의 도입으로 비디오를 웹 페이지에 쉽게 삽입할 수 있게 되었습니다. 비디오 요소를 사용하여 비디오를 재생하고 제어하는 것은 간단하지만, 풀스크린 모드로 변경하는 것은 조금 더 복잡한 작업입니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 HTML5 비디오 요소의 풀스크린 모드를 제어하는 방법을 알아보겠습니다.

1. 퓰스크린 모드 지원 여부 확인하기

비디오 요소에서 풀스크린 모드를 사용하려면 먼저 지원 여부를 확인해야 합니다. document.fullscreenEnabled 속성을 사용하여 풀스크린 모드를 지원하는지 확인할 수 있습니다. 아래는 이를 확인하는 예제 코드입니다.

if (document.fullscreenEnabled) {
  // 풀스크린 모드를 지원하는 경우
} else {
  // 풀스크린 모드를 지원하지 않는 경우
}

2. 풀스크린 모드로 변경하기

풀스크린 모드로 변경하기 위해서는 requestFullscreen() 메소드를 호출해야 합니다. 이 메소드는 비디오 요소에 대해 호출되어야 합니다. 아래는 풀스크린 모드로 변경하는 예제 코드입니다.

const video = document.getElementById('myVideo'); // 비디오 요소 가져오기

if (video.requestFullscreen) {
  video.requestFullscreen(); // 풀스크린 모드로 변경
} else if (video.mozRequestFullScreen) {
  video.mozRequestFullScreen(); // Firefox 브라우저에서 풀스크린 모드로 변경
} else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen(); // Chrome/Safari 브라우저에서 풀스크린 모드로 변경
}

3. 풀스크린 모드 해제하기

풀스크린 모드에서 벗어나기 위해서는 exitFullscreen() 메소드를 호출해야 합니다. 아래는 풀스크린 모드를 해제하는 예제 코드입니다.

if (document.exitFullscreen) {
  document.exitFullscreen(); // 풀스크린 모드 해제
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen(); // Firefox 브라우저에서 풀스크린 모드 해제
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen(); // Chrome/Safari 브라우저에서 풀스크린 모드 해제
}

4. 예제 코드

아래는 풀스크린 모드를 제어하는 예제 코드입니다.

<!DOCTYPE html>
<html>
  <body>
    <video id="myVideo" controls>
      <source src="my_video.mp4" type="video/mp4">
    </video>

    <button onclick="enterFullscreen()">풀스크린 모드로 변경</button>
    <button onclick="exitFullscreen()">풀스크린 모드 해제</button>

    <script>
      const video = document.getElementById('myVideo');

      function enterFullscreen() {
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) {
          video.webkitRequestFullscreen();
        }
      }

      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    </script>
  </body>
</html>

위의 예제 코드를 실행하면 비디오 요소에 풀스크린 모드로 변경하거나 풀스크린 모드에서 벗어날 수 있는 버튼이 나타납니다. 이렇게 자바스크립트를 통해 HTML5 비디오 요소의 풀스크린 모드를 제어할 수 있습니다.

풀스크린 모드를 제어하는 데 사용되는 자바스크립트 메소드와 속성에 대한 자세한 내용은 MDN 웹 문서를 참조하시기 바랍니다.

#비디오 #HTML5