JavaScript key down button for fullscreen on video

videoPlayer.js

videoPlayer.pug

  fullScreenBtn의 keyboard 단축키는 'f'다. f의 keyCode는 70이다. 여기서 현재 video가 fullScreen인지 아닌지를 먼저 판별해야 한다. 그러기 위해서 fullScrnCheck라는 boolean 변수를 하나 생성했다. 현재 스크린의 상태에 따라 fullScreen mode를 사용할지 아닐지를 결정한다.

handlekeydown

  전체 화면이 되었을 때 Chrome은 esc 키를 눌렀을 때 화면을 원상 복귀 시키는 기능이 있다. 하지만 이 기능은 건드릴 수가 없다. 왜냐하면 이 부분을 disable하도록 개발자가 설정을 하면 일반 user는 전체화면을 하고난 후 다시 화면을 축소 시키지 못 하고 컴퓨터를 reboot하게 될지도 모르기 때문이다.

  그렇다고 내버려두면 eventListener들이 꼬여버린다. 그것을 방지하기 위해서 handleESC()함수를 만들었고 이에 대한 eventListener는 'fullscreenchange'다. 이 event는 screen의 크기가 변화할 때마다 실행된다. 그리고 screen이 축소될 때만 실행될 수 있도록 !document.fullscreenElement를 지정해줬다. 

exitFullScreen()

handleESC()

참고 자료

• fullscreenchange event MDN

소스 코드

github.com/zpskek/wetube-v3/commit/34d75697ec2a40dfd8efb93161f3438d08a52199