2020-07-01 Customize Video Player

#유튜브 클론 코딩

 

Video 태그에서 지원되는 함수나 기능이 많은 걸 오늘에서야 알았다. 

회사 서비스에 동영상을 지원해주는 게 있는데, 회사만의 디자인으로 커스터마이징을 할 수 있을 거 같다.

 

비디오 재생, 멈춤, 음소거를 자바스크립트로 구현해봤다.

 

const videoContainer = document.getElementById("jsVideoPlayer");
const videoPlayer = document.querySelector("#jsVideoPlayer video");
const playBtn = document.getElementById("jsPlayButton");
const volumeBtn = document.getElementById("jsVolumeBtn");

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

function handleVolumeClick() {
  if (videoPlayer.muted) {
    videoPlayer.muted = false;
    volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
  } else {
    videoPlayer.muted = true;
    volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
  }
}

function init() {
  playBtn.addEventListener("click", handlePlayClick);
  volumeBtn.addEventListener("click", handleVolumeClick);
}

if (videoContainer) {
  init();
}

 

내일은 전체 화면으로 보기를 구현할 계획이다.