<Custom Player> Javascript - playButton

playButton을 만들고 click evnetListener를 추가하여 재생 및 멈춤 기능을 만들어보겠습니다.

project

youtube
  |views
    |mixins
     *|videoPlayer.pug
  |assets
    |js
     *|videoPlayer.js

videoPlayer.pug

mixin videoPlayer(video = {})
  .videoPlayer#jsVideoContainer
    video#jsVideoPlayer(src=video.src)
    .videoPlayer__controls
      .videoPlayer__column
        span#jsPlayButton
          i.fas.fa-play
      .videoPlayer__column

videoPlayer.js

• init trigger
  javascript파일은 모든 탬플릿에 적용되기 때문에 videoContainer에 undefined값이 들어있을 수도 있습니다. undefined값이 있는데 init을 실행하면 에러가 발생하기 때문에 videoContainer 여부를 먼저 확인하고 init을 실행하도록 하였습니다.

• video paused property
  현재 video가 paused인지 아닌지를 boolean 값으로 반환해줍니다. 값을 전달할 수는 없는 read-only property입니다.

• ended event
  재생이 완료된 시점에 fire되는 event입니다.

const videoContainer = document.querySelector("jsVideoContainer");
const videoPlayer = document.querySelector("#jsVideoPlayer");
const playButton = document.querySelector("#jsPlayButton");

function handlePlay(){
  if(videoPlayer.paused){
    videoPlayer.play();
    playButton.innerHTML = '<i class="fas fa-pause"></i>';
  }else{
    videoPlayer.pause();
    playButton.innerHTML = '<i class="fas fa-play"></i>';
  }
}

function handleEnd(){
  playButton.innerHTML = '<i class="fas fa-redo"></i>';
}

function init(){
  playButton.addEventListener("click", handlePlay);
  videoPlayer.addEventListener("ended", handleEnd);
}

if(videoContainer){
  init();
}