커스텀 비디오 플레이어 만들기

TIL

HTML Video 커스텀 플레이어

• 참고
  : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

• HTMLMediaElement
  : 오디오와 비디오 엘리먼트를 포함하는 미디어 엘리먼트, 따라서 오디오와 비디오 태그는 같은 속성을 공유한다.

• video 태그 기본 구조

<video id="player" controls poster="">
	<source src="./video.mp4" type="video/mp4" />
	이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>

controls 옵션을 적용하면 최초 화면 로드 시 비디오 태그의 컨트롤러가 나타난다.
video.removeAttribute('controls');를 통해 컨트롤러를 비디오 화면에서 제거할 수 있다.

• video.duration
  : 비디오 총 길이를 초 단위로 나타낸다. 미디어가 없을 경우 NaN

• video.currentTime
  : 비디오 현재 재생시간을 초 단위로 변경하거나 가져올 수 있다.

var currentTime = htmlMediaElement.currentTime;
htmlMediaElement.currentTime = 35;

• video.play(), video.pause()
  : 비디오 실행, 멈춤

• video.paused
  : 비디오가 일시 중지되었는지 여부. Boolean 타입.

• timeupdate 이벤트
  : currentTime이 변경될 때 발생하는 이벤트

• 비디오 정지 버튼 클릭 이벤트

stopBtn.addEventListener("click", e => {
	video.pause();
	//비디오 현재 시간을 0초로 변경
	video.currentTime = 0;
});

• 비디오 끝났을 때 발생하는 이벤트

video.addEventListener('ended', function(e) {});

• 자바스크립트에서 몫과 나머지를 구하는 방법

몫 = parseInt(숫자 / 나눌 숫자);
나머지 = 숫자 % 나눌 숫자;

목을 구할 경우에는 parseInt를 이용해서 숫자를 나눈뒤 정수형을 취해준다.
나머지는 % 연산자를 이용해서 구할 수 있다

• 비디오 경과 시간 00:00로 표현하기

function setTime(time) {
	const min = parseInt(time / 60);
	//const min = Math.floor(time / 60);
	const sec = Math.round(time % 60);
	//const sec = Math.floor(time) - min * 60;

	$timeSpan.innerText = `${convertTime(min)}:${convertTime(sec)}`;
}

• ✨✨✨ 자바스크립트 엘리먼트 높이, 너비와 같은 속성 구하기
  : https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

• ✨✨✨ screenX, clientX, offsetX, pageX 비교
  : http://megaton111.cafe24.com/2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90/

• click Event.offsetX
  : 현재 박스 기준으로 클릭한 위치의 x좌표 값을 반환한다.

• 비디오 프로그레스 바 클릭 시 비디오 시간 변경하기

$progressBar.addEventListener("click", (e) => {
    const rect = e.target.getBoundingClientRect();
    const width = rect.width;
    const offsetX = e.offsetX;

	//클릭 한 위치(현재 박스 기준으로 x좌표) / 총 너비
    const widthRatio = offsetX / width;
	//이동 할 시간 구하는 방법 => 이동할 시간 : 총 시간 = 클릭한 좌표 위치 : 총 너비
    const toTime = Math.round(widthRatio * $player.duration);

    $player.currentTime = toTime;
	//클릭한 좌표로 비디오 프로그레스바 버튼 이동
    moveTimeLineControl(offsetX);
});

클릭 한 좌표 / 총 너비 비율을 이용해서 이동할 시간을 구한다.

• 클릭한 좌표로 프로그레스바 버튼 위치 이동시키기

function moveTimeLineControl(x) {
    $timelineControl.style.transform = `translateX(${x}px)`;
}

현재 클릭한 좌표(offsetX)만큼 translateX 속성을 변경한다

• 프로그레스 바 버튼 드래그해서 이동시키기 및 시간 변경하기