[JavaScript30] Day 11

Custom Video Player

 

특별할 건 없지만, 쉽게 접할수 있는 동영상 컨트롤러 만들기

// Get our Elements
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');

// Build oyt functions
function togglePlay() {    
    // if(video.paused) {
    //     video.play();
    // } else {
    //     video.pause();
    // }
    const method = video.paused ? 'play' : 'pause'
    video[method]();
}

function updateButton() {
    const icon = this.paused ? '▶' : '❚ ❚';
    toggle.textContent = icon;
    // console.log(icon);
}

function skip() {
    // console.log('Skipping!')
    // console.log(this.dataset.skip);
    video.currentTime += parseFloat(this.dataset.skip);
}

function handleRangeUpdate() {    
    video[this.name] = this.value;
    // console.log(this.name);
    // console.log(this.value);    
}

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

function scrub(e) {
    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
    // console.log(e);
}

// Hook up the event Listeners
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
video.addEventListener('timeupdate', handleProgress);
toggle.addEventListener('click', togglePlay);
skipButtons.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));

let mousedown = false;
progress.addEventListener('click', scrub);
// progress.addEventListener('mousemove', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);

 

++ 전체화면 버튼 추가

전체화면 버튼을 추가하고

- 버튼 클릭으로 전체화면모드 클래스를 추가 또는 제거하도록한다.

- ESC버튼으로 전체화면모드에서 나갈수 있다. (클래스 제거)

이러한 동작을할 수 있도록 아래와 같은 코드를 추가했다.

HTML

<button class="player__button fullscreen">
  <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
    <g><path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path></g>
    <g><path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path></g>
    <g><path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path></g>
    <g><path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></g>
  </svg>
</button>

CSS

.fullscreen svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}

.fullscreen_mode {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 100;
}

.fullscreen_mode .player {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 480px;
  transform: translate(-50%, -50%);
}

Javscript

// Build oyt functions
function fullScreen(e) {
    let classList = container.classList;
    let hasFull = classList.contains('fullscreen_mode');
    hasFull ? classList.remove('fullscreen_mode') : e.keyCode === 27 ? false : classList.add('fullscreen_mode');
}

// Hook up the event Listeners
full.addEventListener('click', () => fullScreen);
document.addEventListener('keydown', () => fullScreen)

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)