HTML5 비디오 요소는 웹 애플리케이션에서 비디오를 재생하는 강력한 도구입니다. 그러나 때로는 비디오의 썸네일을 표시하여 사용자에게 미리보기 기능을 제공하고 싶을 수 있습니다. 이를 위해 자바스크립트를 사용하여 HTML5 비디오 썸네일을 생성하는 방법을 알아보겠습니다.
1. HTML 비디오 요소 생성하기
먼저 HTML 문서에 <video> 요소를 생성해야 합니다. 이 요소에는 src 속성을 통해 비디오 파일의 경로를 지정해야 합니다. 예를 들어, 아래와 같이 비디오 요소를 생성할 수 있습니다.
<video src="video.mp4" controls></video>
2. 썸네일 생성하기 위한 자바스크립트 코드 작성하기
다음으로, 자바스크립트 코드를 통해 비디오의 썸네일을 생성해야 합니다. 이를 위해 HTMLMediaElement 인터페이스의 currentTime 속성을 사용하여 비디오 플레이어의 현재 시간을 가져올 수 있습니다. 이 시간을 기준으로 canvas 요소를 사용하여 썸네일 이미지를 만들 수 있습니다.
// 썸네일을 생성하기 위한 비디오 요소 가져오기
const video = document.querySelector('video');
// 비디오에 이벤트 리스너 추가
video.addEventListener('loadeddata', () => {
// 비디오 썸네일을 생성할 canvas 요소 생성
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 썸네일 이미지의 크기 설정
canvas.width = 200;
canvas.height = 150;
// 비디오의 현재 시간에 해당하는 프레임을 캡쳐하여 썸네일 생성
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// 썸네일 이미지를 화면에 표시
const thumbnail = document.querySelector('#thumbnail');
thumbnail.src = canvas.toDataURL();
});
위 코드에서는 loadeddata 이벤트를 사용하여 비디오가 로드되고 재생 가능한 상태가 되었을 때 비디오 썸네일을 생성합니다. 그리고 canvas 요소를 생성하여 비디오 캡쳐를 위한 작업을 수행합니다. 생성한 썸네일 이미지를 toDataURL 메소드를 사용하여 Base64 형태의 데이터 URL로 변환하여 화면에 표시합니다.
3. 썸네일 이미지 표시하기
코드에서 나오는 thumbnail은 썸네일 이미지를 표시할 <img> 요소를 가리킵니다. 이 요소를 HTML 문서에 추가하고, src 속성을 비워둡니다.
<img id="thumbnail" />
이제 자바스크립트 코드에서 생성한 썸네일 이미지를 이 <img> 요소에 표시할 수 있습니다.
마무리
위에서 설명한 방식은 자바스크립트를 사용하여 HTML5 비디오 썸네일을 생성하는 간단하고 효과적인 방법입니다. 비디오의 현재 시간을 기준으로 캡쳐하여 썸네일 이미지를 만들고 이를 HTML 문서에 표시하는 방법을 사용할 수 있습니다. 이를 통해 사용자에게 더 좋은 사용자 경험을 제공할 수 있습니다.
*참고 자료: