티스토리 뷰

javascript/javascript30

11 - Custom Video Player (Javascript 30)

oraclian 2019. 10. 20. 14:32

이번에는 커스텀 비디오 플레이어 만들기입니다.

 

이번 파트 부분을 열었을때 javascript 파일이 별도로 분리가 되어있어서 당황했네요.

 

자 그럼 간단히 기본코드에 대해서 설명하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Video Player</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

   <div class="player">
     <video class="player__video viewer" src="652333414.mp4"></video>

     <div class="player__controls">
       <div class="progress">
        <div class="progress__filled"></div>
       </div>
       <button class="player__button toggle" title="Toggle Play">►</button>
       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-skip="-10" class="player__button">« 10s</button>
       <button data-skip="25" class="player__button">25s »</button>
     </div>
   </div>

  <script src="scripts.js"></script>
</body>
</html>

위의 html 코드를 보면 간단하게 비디오 플레이어의 모습을 html 태그와 css 코드로 작성이 되어있는것을 볼 수 있습니다.

하지만 실제로 동작하는 비디오 플레이어는 아닙니다.

이제부터는 각각의 기능을 구현을 하겠습니다.

 

그럼 scripts.js 파일을 열어 코드를 작성해보겠습니다.

 

1. 모든 element를 변수로 저장

const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');

 

2. 비디오 클릭시 영상 재생 또는 일시정지 구현

function togglePlay() {
    const method = video.paused ? 'play' : 'pause';  // 비디오 재생 상태에 따른 메소드 호출
    video[method]();
}
video.addEventListener('click', togglePlay); // video 클릭 이벤트 구현

 

3. 플레이어의 상태에 따라 toggle 버튼 변경

function updateButton() {
    const icon = this.paused ? '►' : '❚ ❚';
    toggle.textContent = icon;
}
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);

 

4. 프로그래스바 이벤트 등록

function handleProgress() {
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
}
video.addEventListener('timeupdate', handleProgress);

 

자 이제 video element와 관련된 내용은 끝이 났습니다.

이제 각각의 버튼과 프로그래스바의 기능을 구현하겠습니다.

 

5. 토글버튼 구현

toggle.addEventListener('click', togglePlay);  // 토글버튼을 클릭하면 영상 재생

 

6. 스킵 버튼 구현

function skip() {
    video.currentTime += parseFloat(this.dataset.skip);
}
skipButtons.forEach((button) => button.addEventListener('click', skip));

 

7. 음량조절, 속도조절 레인지 업데이트 구현

function handleRangeUpdate() {
    video[this.name] = this.value;
}
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));

 

8. 프로그래스바 이벤트 구현

function scrub(e) {
    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
}
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);

이제 커스텀 비디오 플레이어를 구현했습니다.

'javascript > javascript30' 카테고리의 다른 글

13 - Slide in on Scroll (Javascript 30)  (0) 2019.10.20
12 - Key Sequence Detection (Javascript 30)  (0) 2019.10.20
10 - Hold Shift and Check Checkboxes (Javascript 30)  (0) 2019.10.20
09 - Dev Tools Domination (Javascript 30)  (0) 2019.10.20
08 - Fun with HTML5 Canvas (Javascript 30)  (0) 2019.10.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함