JavaScript video full screen button

videoPlayer.js

videoPlayer.pug

init()

goFullScrenn()

• 사용자가 fullScrenn 버튼을 눌렀거나 videoContainer를 더블클릭했을 때 goFullScreen이 실행되도록 구현했다.
• Fullscreen이 되는 대상은 videoPlayer(video)가 아니라 그 전체를 감싸고 있는 videoContainer다.
• 그 후 fullscreen 버튼을 눌렀거나 다시 더블클릭했을 때 화면이 축소될 수 있도록 goFullScreen event를 제거하고 exitFullScreen event를 추가했다.

exitFullScreen()

• exitFullscreen()은 element method가 아니라 document method다. 그렇기 때문에 document.exitFullscreen()을 사용해야 한다. 매커니즘은 goFullScreen과 같다. 화면이 단지 축소될 뿐이다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• Using fullscreen mode

소스 코드

github.com/zpskek/wetube-v3/commit/30e61581a271ae135ce049cc8635f4e4c5e9893a