[JavaScript] 비디오 풀스크린 기능 구현

안녕하세요 여러분 까불린입니다 ! 

오늘은 제가 포트폴리오 진행을 하다가 배운 풀스크린(fullscreen) 기능을 말씀드리려고 해요! 

 

포트폴리오 내의 버튼을 클릭해서 비디오 풀스크린 모드를 실행하기 위해 쓴 방법입니다 !

 

 

전체화면으로 전환

document.documentElement.requestFullscreen()

실질적으로 코드에 적용하실때에는 아래 처럼 사용하실 수 있으세요 ! 

const fullscreen = element => {
  element.requestFullscreen()
}

---

전체화면 끄기

document.exitFullscreen()

실질적인 코드사용은 아래와 같습니다 ! 

const exitFullScreen = () => {
  document.exitFullscreen()
}

---

토글 

저 같은 경우 같은 버튼을 사용해서 토글을 이용했는데,

아래와 같은 코드를 사용했습니다 !

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

---

간단한 예시를 들자면, 이렇게 간단하게 버튼으로 풀스크린을 만들 수 있었습니다 ! 

<video src="video/test.mp4" id="vid_fullscreen" controls autoplay muted></video>
<button onclick="video_fullscreen()">FullScreen Button</button>
 
<script>
    function video_fullscreen() {
        document.getElementById("vid_fullscreen").requestFullscreen();
    }
</script>

 

 

 

 

 

 

그럼 이만, 이번 포스팅을 마치도록 하겠습니다 ! 

저처럼 혼자 공부하시는 분들께서 

이 글을 보고 도움이 되셨으면 좋겠어요 ! 

 

 

 

 

 

 

오늘도 좋은 하루 되세용 🥰