비디오 플레이어.

기능

사이트 데모

이벤트로 기능 보기

자바스크립 이벤트 리스너를 미리보며 적용할 기능에 대해 생각해보자

클릭으로 재생과 멈춤의 토글이 가능해야하고.
playBtn.addEventListener('click', togglePlay);

영상을 누르면 재생과 멈춤이 토글되야한다.
video.addEventListener('click', togglePlay);

영상은 시간이 계속 지날때-- 영상이 진행중. 혹은 다시 재생을 시작할때( canplay) 업데이트 된다.
video.addEventListener('timeupdate', updateProgress);
video.addEventListener('canplay', updateProgress);

진행바의 범위를 누름으로서 진행률을 바꿀 수가 있다.
progressRange.addEventListener('click', setProgress);

소리 범위를 클릭해서 범위를 바꾸고 스피커를 눌러 무음모드 토글이 가능하다.
volumeRange.addEventListener('click', changeVolume);
volumeIcon.addEventListener('click', toggleMute);

여러 옵션 중 택해 속도 조절이 가능하다
speed.addEventListener('change', changeSpeed);

전체화면 토글도 가능.
fullscreenBtn.addEventListener('click', toggleFullscreen);

HTML 분석.

<video class="video" src='https://pixabay.com/videos/download/video-31377_tiny.mp4?attachment' playsinline></video>
화면 안 재생을 위해서 playsinline사용.(모바일 위해서.)

자바스크립트 분석.

재생/멈춤

토글로 재생

playBtn.addEventListener('click', togglePlay);
video.addEventListener('click', togglePlay);

function togglePlay() {
  if (video.paused) {
    video.play();
    playBtn.classList.replace('fa-play', 'fa-pause');
    playBtn.setAttribute('title', 'Pause');
  } else {
    video.pause();
    showPlayIcon();
  }
  //멈추면 재생, 재생이면 멈춤.
  //css 디자인을 건드려주기.
}

디자인을 건드는 것을 별개 함수로 분리하기.

function showPlayIcon() {
  playBtn.classList.replace('fa-pause', 'fa-play');
  playBtn.setAttribute('title', 'Play');
}

비디오 끝나면 아이콘 보이게.

// 영상 끝나면 영상 아이콘 보이게 하기.
video.addEventListener('ended', showPlayIcon);

영상 재생.

video.addEventListener('timeupdate', updateProgress);
video.addEventListener('canplay', updateProgress);

// 현재 시간 기간을 계산해서 형식대로 반환해줌.
function displayTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = Math.floor(time % 60);
  seconds = seconds > 9 ? seconds : `0${seconds}`;
  return `${minutes}:${seconds}`;
}

// 영상 진행에 따라 진행률바 업데이트
function updateProgress() {
  progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`;
  currentTime.textContent = `${displayTime(video.currentTime)} /`;
  duration.textContent = `${displayTime(video.duration)}`;
}

진행 눌러서 변경.

진행률을 눌러서 영상 진행을 변경하자.

//클릭으로 비디오 진행.
function setProgress(e) {
  const newTime = e.offsetX / progressRange.offsetWidth;
  progressBar.style.width = `${newTime * 100}%`;
  video.currentTime = newTime * video.duration;
}

음성 크기 조작.

volumeRange.addEventListener('click', changeVolume);

//변하는 음성값을 최종적으로 저장하여 보존하는 음성값.
let lastVolume = 1;

실제 음성 변화는 video.volume이 lastvolume은 이전 음성값을 저장하는 역할.
이걸 가지고 변경을 해야한다.

// 음성 
function changeVolume(e) {
  //누른 위치/ 전체 음성 길이는 현재 음성 크기.
  let volume = e.offsetX / volumeRange.offsetWidth;
  // 볼륨이 최대최소 근사하면 그 값으로 
  if (volume < 0.1) {
    volume = 0;
  }
  if (volume > 0.9) {
    volume = 1;
  }
  volumeBar.style.width = `${volume * 100}%`;
  video.volume = volume;

  // 음성 크기에 따라 아이콘 변경.
  volumeIcon.className = '';
  if (volume > 0.7) {
    volumeIcon.classList.add('fas', 'fa-volume-up');
  } else if (volume < 0.7 && volume > 0) {
    volumeIcon.classList.add('fas', 'fa-volume-down');
  } else if (volume === 0) {
    volumeIcon.classList.add('fas', 'fa-volume-off');
  }
  lastVolume = volume;
  //최종 음성 값에 저장.
}

음소거.

volumeIcon.addEventListener('click', toggleMute);

// 음소거.
function toggleMute() {
  //기본 리셋
  volumeIcon.className = '';
  if (video.volume) {
    //음성의 변경값이 있을때
    lastVolume = video.volume;
    video.volume = 0;
    volumeIcon.classList.add('fas', 'fa-volume-mute');
    volumeIcon.setAttribute('title', 'Unmute');
    volumeBar.style.width = 0;
  } else {
    video.volume = lastVolume;
    volumeIcon.classList.add('fas', 'fa-volume-up');
    volumeIcon.setAttribute('title', 'Mute');
    volumeBar.style.width = `${lastVolume * 100}%`;
  }
}

영상 속도.

speed.addEventListener('change', changeSpeed);

음성과는 다르게 일정값이 주어져서 거기서 택일을 하는 change를 사용.

html

   <!-- 속도-->
<div class="speed" title="Playback Rate">
<select name="playbackRate" class="player-speed">
    <option value="0.5">0.5 x</option>
    <option value="0.75">0.75 x</option>
    <option value="1" selected>1.0 x</option>
    <option value="1.5">1.5 x</option>
    <option value="2">2.0 x</option>
</select> 
</div>

const speed = document.querySelector('.player-speed');이므로
속도를 변경하는 건 간단하게.
function changeSpeed() { video.playbackRate = speed.value; }
Playbackrate
이렇게 처리해주자.

전체화면.

[전체화면 만들기.](https://www.w3schools.com/howto/howto_js_fullscreen.asp)

fullscreenBtn.addEventListener('click', toggleFullscreen);에 대해
let fullscreen = false;을 만들어 전체화면을 판정한다.

전체화면 토글.

// 전체화면 토글
function toggleFullscreen() {
  if (!fullscreen) {
    openFullscreen(player);
  } else {
    closeFullscreen();
  }
  fullscreen = !fullscreen;
}

Player는 문서의 재생창 전체를 이른다.

위의 링크에서 일러준대로 여러브라우저마다 전체화면을 실행하는 데에는 차이가 있다. 따라서 코드를 따라 작성해보자.

전체화면 열기.

/* 전체화면으로 보기 */
function openFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    /* IE/Edge */
    element.msRequestFullscreen();
  }
  video.classList.add('video-fullscreen');
}

화면 닫기.

/* 전체화면 닫기. */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    /* IE/Edge */
    document.msExitFullscreen();
  }
  video.classList.remove('video-fullscreen');
}

완성