개요
HTML5의 <video> 태그를 사용하면 웹 페이지에 동영상을 손쉽게 추가할 수 있습니다. 지원되는 주요 비디오 형식은 MP4, WebM, Ogg 세 가지입니다.
이 글에서는 사용자가 하드 드라이브에 저장된 로컬 비디오 파일을 선택하면, 별도의 서버 업로드 없이 브라우저에서 바로 재생하는 방법을 단계별로 알아보겠습니다.
1. input 요소로 파일 선택하기
먼저 <input type="file"> 요소를 통해 사용자가 로컬 비디오 파일을 선택하도록 합니다.
<input type="file" accept="video/*" id="videoFile">
<video id="player" controls width="480"></video>
accept="video/*" 속성을 추가하면 파일 선택 대화 상자에서 비디오 파일만 표시되어 사용자 편의성이 향상됩니다.
2. change 이벤트 처리
사용자가 파일을 선택하면 change 이벤트가 발생합니다. change 이벤트는 <input>, <select>, <textarea> 요소에서 사용자가 값을 변경했을 때 발생합니다. 이 이벤트를 감지하여 파일 처리 로직을 실행합니다.
document.getElementById('videoFile').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
// 파일 처리 로직
}
});3. File 객체 가져오기
File 인터페이스는 파일에 대한 정보를 제공하며, 웹 페이지의 JavaScript가 파일 내용에 접근할 수 있게 해줍니다. HTML <input> 요소의 files 프로퍼티가 이 객체를 반환하며, 이를 통해 <input type="file">로 선택한 파일 목록에 접근할 수 있습니다.
4. File 객체를 가리키는 Object URL 생성
URL.createObjectURL() 정적 메서드를 사용하면 매개변수로 전달된 객체를 나타내는 URL을 포함한 DOMString을 생성할 수 있습니다. 이 URL은 로컬 파일을 직접 참조하므로 서버 업로드 없이 즉시 재생이 가능합니다.
const objectURL = URL.createObjectURL(file);
사용이 끝난 후에는 URL.revokeObjectURL(objectURL)을 호출하여 메모리를 해제하는 것이 좋습니다.
5. Object URL을 video.src에 설정
마지막으로, 생성된 Object URL을 <video> 요소의 src 속성에 할당하면 화면에 동영상이 표시됩니다. src 속성은 재생할 비디오 파일의 위치(URL)를 지정합니다.
const player = document.getElementById('player');
player.src = objectURL;
player.play();전체 예제 코드
<!DOCTYPE html>
<html>
<body>
<input type="file" accept="video/*" onchange="playVideo(this)">
<br><br>
<video controls width="480"></video>
<script>
function playVideo(input) {
const file = input.files[0];
if (!file) return;
const video = document.querySelector('video');
video.src = URL.createObjectURL(file);
video.play();
}
</script>
</body>
</html>
정리
파일 선택 → change 이벤트 → File 객체 획득 → Object URL 생성 → video.src 설정이라는 다섯 단계만 거치면, 로컬 하드 드라이브의 비디오 파일을 서버 없이 브라우저에서 바로 재생할 수 있습니다. 미리보기 기능, 업로드 전 확인 화면 등 다양한 용도로 활용해 보세요.