JS30-Video Player

JS30 의 Video player를 해보던 중 놓쳤거나 개선이 필요했던 부분을 기록해두려 합니다. 

1. data- 로 HTML 문서에서 attribute로 지정한 속성은 element.dataset으로 접근해서 활용이 가능하다.

//원본 HTML TAG
//<button data-skip="-10" class="player__button">« 10s</button>
//<button data-skip="25" class="player__button">25s »</button>


// 내가 작성한 방식
const backSkipBtn = document.querySelector('button[data-skip="-10"]')
const forwardSkipBtn = document.querySelector('button[data-skip="25"]')

backSkipBtn.addEventListener('click', moveBack)
forwardSkipBtn.addEventListener('click', moveForward)

function moveBack(e) {
    video.currentTime -= 10;
}

function moveForward(e) {
    video.currentTime += 25;
}

//더 깔끔한 방식
//skip 버튼 노드리스트로 가져와서 data- 로 표시한 데이터 활용 가능함.
const skipButtons = document.querySelectorAll('[data-skip]');
skipButtons.forEach( (btn) => btn.addEventListener('click', handleSkip))

function handleSkip(e) {
    video.currentTime += (+this.dataset.skip)
}

 

2. HTML tag 에 지정된 attribute는 대부분 this.속성 의 형태로 접근할 수 있음.

//HTML
//<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">



//내가 한 방식
const volumeBar = document.querySelector('input[name="volume"]');
const speedBar = document.querySelector('input[name="playbackRate"]');

volumeBar.addEventListener('input', handleVolumeRange);
speedBar.addEventListener('input', handleSpeed);

function handleVolumeRange(e) {
    const volumeInput = this.value;
    video.volume = volumeInput;
}

function handleSpeed(e) {
    const speedInput = this.value;
    video.playbackRate = speedInput;
}

// 더 간결한 방식
//볼륨과 스피드바도 노드리스트로 가져와서 활용가능
const ranges = document.querySelectorAll('[type="range"]');

ranges.forEach((bar) => bar.addEventListener('click', handleRange))
ranges.forEach((bar) => bar.addEventListener('mousemove', handleRange))

//html name 속성이 video dom element의 속성명과 같으니 이렇게 간단하게 가능.
function handleRange(e) {
    video[this.name] = this.value;
}

 

3. event의 offsetX과 Dom element의 offsetWidth 속성을 통해 특정 Element 내의 위치를 알 수 있다. 

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

//간단한 구현 방법.
const video = document.querySelector('video');
const progress = document.querySelector('.progress');

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

progress.addEventListener('click', scrub);
function scrub(e) {
    video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration;
    }

특히 11 번째줄은 && 연산자가 앞에 것이 true 인지에 따라 실행되는 성질을 활용한것.
(아래의 MDN && 문서의 short circuit 설명부분을 보자)

참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation

Logical AND (&&) - JavaScript | MDN