JavaScript video play button

  앞으로 생성할 모든 프론트엔드 part의 JS 파일은 main.js에서 import를 할 것이다. 그리고 main.pug에서 main.js만 script에 포함시킬 것이다.

assets/js/main.js

views/layouts/main.pug

videoPlayer.js

videoPlayer.pug

videoPlayer.js

  모든 함수는 init()에 선언할 것이다. 그리고 init 함수는 videoContainer가 있을 경우에만 실행되도록 if문으로 구성한다.

• 사용자가 playBtn을 눌렀거나 video 화면을 클릭했을 때, video가 play or pause가 될 수 있도록 'click' event를 추가했고 그에 대한 실행을 handlePlayClick로 구현했다.
• handlePlayClick는 videoPlayer가 paused(멈춰있으면 boolean 값으로 true를 반환)면 video를 실행하고 playBtn icon을 pause 모양으로 바꾼다.
• 그렇지 않다면 videoPlayer를 pause하고 playBtn을 play모양으로 바꾼다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• HTMLMediaElement API MDN

소스 코드

https://github.com/zpskek/wetube-v3/commit/adb24355426f582a7549b50dca3d70752551b800