video 태그 사용법을 연습했다.

와이어 프레임

기능 목록

1. 동영상 재생하기
   • 동영상 재생 버튼과 화면을 누르면 동영상 재생
   • 재생 버튼을 정지 버튼으로 변경하기
2. 동영상 멈추기
   • 동영상 정지 버튼과 화면을 누르면 동영상 정지
   • 정지 버튼을 재생 버튼으로 변경하기
3. 동영상 프로그레스 바 컨트롤
   • 동영상 정지 시 프로그레스 바 멈추기 → 타임스탬프 정지
   • 동영상 재생 시 프로그레스 바 이동하기 → 1초마다 타임스탬프 증가

완성본

완성본(Github) 바로가기

배운점

video 썸네일 설정하기

비디오의 썸네일은 poster 속성에 이미지를 넣어줌으로써 지정할 수 있다.

<video src="videos/gone.mp4" id="video" class="screen" poster="img/poster.png"></video>

video 재생 상태 다루기

직접 동영상 플레이어를 만들어야하기 때문에 동영상의 재생과 정지 상태를 알아야 했다. 비디오가 정지 상태인지는 video.paused로 알 수 있다.

비디오 재생(또는 정지) 버튼을 눌렀을 때, 비디오가 재생 중이라면 정지하고 정지 중이라면 재생해야 한다. 이는 play 메서드와 pause 메서드로 구현할 수 있다.

function toggleVideoStatus() {
	if(video.paused) {
		video.play(); // 비디오 재생하기
	} else {
		video.pause(); // 비디오 멈추기
	}
}

video 재생 시간 다루기

동영상 플레이어의 재생바를 input[type:range]로 구현했다. 최솟값은 0, 최댓값은 100으로 설정해 비디오의 총 시간(길이) 중 중 현재 재생된 시간의 비율로 value를 잡아야 했다.

<input type="range" id="progress" class="progress" min="0" max="100" step="0.1" value="0" />

비디오 태그에 연결된 비디오의 총 길이는 video.duration으로 알 수 있고, 현재 재생 중인 시점은 video.currentTime으로 알 수 있다.

재생 바의 슬라이더 위치

재생 바의 슬라이더 위치 즉, range의 value는 비디오 총 길이(video.duration)에 대한 현재 재생한 시점(video.currentTime)의 비율로 설정했다.

progress.value = (video.currentTime / video.duration) * 100;

슬라이더 위치가 임의로 변경된 경우 비디오의 재생 시점을 변경해줘야 했는데, 이는 range의 value에 비디오 총 길이(video.duration)를 곱한 비율로 설정했다.

video.currentTime = (+progress.value * video.duration) / 100;

video의 이벤트 타입

• click: 비디오 태그가 차지하는 공간에 클릭 이벤트가 발생한 경우
• pause: 비디오가 정지된 경우
• play: 비디오가 재생된 경우
• timeupdate: 비디오의 현재 재생 중인 시점이 바뀐 경우(계속 재생 중이거나 슬라이더를 임의로 조절했을 때)