728x90
안녕하세요.
안녕하세요! 오늘은 JavaScript를 사용자가 자신의 컴퓨터에서 동영상 파일을 선택하고, 웹 브라우저에서 직접 미리보기로 재생할 수 있는 기능을 구현해 보겠습니다.
주요 기능을 정리하면 다음과 같습니다.
- 사용자가 파일을 선택하면 동영상을 미리보기로 재생
- 파일 크기 제한: 50MB 이하의 동영상만 업로드 가능
- 파일 정보 표시: 파일 이름, 크기, 형식을 화면에 출력
- 드래그 앤 드롭을 통한 파일 업로드 지원
- 다중 파일 선택 기능으로 여러 동영상을 한 번에 미리보기
1. HTML 코드 작성 : index.html
먼저 기본적인 HTML 구조를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동영상 미리보기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>동영상 미리보기</h1>
<div id="dropArea">
<p>여기로 파일을 드래그하거나 클릭하여 동영상을 선택하세요.</p>
<input type="file" id="fileInput" accept="video/*" multiple>
</div>
<div id="videoList"></div>
<script src="script.js" defer></script>
</body>
</html>
- <input type="file" accept="video/*" multiple>: 사용자가 동영상 파일만 선택할 수 있도록 제한합니다.
- <video> 태그는 동영상 재생을 위한 HTML5 요소입니다.
2. 스타일 적용하기 : style.css
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
background-color: #f8f8f8;
padding: 20px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
#dropArea {
border: 3px dashed #6c63ff;
padding: 20px;
width: 80%;
max-width: 600px;
text-align: center;
background-color: #ffffff;
cursor: pointer;
}
#dropArea.dragover {
background-color: #e0e0e0;
}
.video-container {
margin-top: 20px;
text-align: center;
}
video {
width: 100%;
max-width: 600px;
margin-top: 10px;
}
.video-info {
font-size: 0.9em;
color: #666;
margin-top: 5px;
}
- dropArea는 파일을 드래그 앤 드롭할 수 있는 영역입니다.
- .video-container는 동영상과 파일 정보를 표시하는 스타일입니다.
3. JavaScript 코드 작성하기 : script.js
이제 본격적으로 JavaScript를 활용해 파일 선택 및 드래그 앤 드롭 기능을 구현해 보겠습니다.
document.addEventListener('DOMContentLoaded', () => {
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const videoList = document.getElementById('videoList');
// 최대 파일 크기 제한: 500MB
const MAX_FILE_SIZE = 500 * 1024 * 1024;
// 파일 선택 버튼 클릭 시 파일 선택창 열기
dropArea.addEventListener('click', () => fileInput.click());
// 파일 선택 시 처리
fileInput.addEventListener('change', (event) => handleFiles(event.target));
// 드래그 앤 드롭 이벤트 설정
dropArea.addEventListener('dragover', (event) => {
event.preventDefault();
dropArea.classList.add('dragover');
});
dropArea.addEventListener('dragleave', () => dropArea.classList.remove('dragover'));
dropArea.addEventListener('drop', (event) => {
event.preventDefault();
dropArea.classList.remove('dragover');
handleFiles(event.dataTransfer);
});
function handleFiles(input) {
const files = input.files;
for (const file of files) {
if (file.size > MAX_FILE_SIZE) {
alert(`파일 "${file.name}"이(가) 너무 큽니다. 최대 500MB 이하로 업로드해주세요.`);
continue;
}
if (!file.type.startsWith('video/')) {
alert('동영상 파일만 업로드할 수 있습니다.');
continue;
}
displayVideo(file);
}
}
function displayVideo(file) {
const fileURL = URL.createObjectURL(file);
const videoContainer = document.createElement('div');
videoContainer.className = 'video-container';
const videoElement = document.createElement('video');
videoElement.src = fileURL;
videoElement.controls = true;
videoElement.style.maxHeight = '400px';
videoElement.style.marginTop = '20px';
const videoInfo = document.createElement('div');
videoInfo.className = 'video-info';
videoInfo.textContent = `파일명: ${file.name} | 크기: ${(file.size / 1024 / 1024).toFixed(2)}MB | 형식: ${file.type}`;
videoContainer.appendChild(videoElement);
videoContainer.appendChild(videoInfo);
videoList.appendChild(videoContainer);
}
});
- 파일 크기 제한: MAX_FILE_SIZE를 500MB로 설정했습니다.
- 동영상 미리보기: 파일을 선택하거나 드래그 앤 드롭하면, <video> 태그를 동적으로 생성해 미리보기로 재생합니다.
- 파일 정보 표시: 동영상 파일의 이름, 크기, 형식을 화면에 표시합니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 이벤트 위임(Event Delegation)으로 동적 리스트 관리하기 (0) | 2024.11.22 |
|---|---|
| [JavaScript] OpenStreetMap 지도 위에 반경 표현하기 (2) | 2024.11.19 |
| [JavaScript] OpenStreetMap 지도 위에 경로가 그려지는 애니메이션 출력 (0) | 2024.11.13 |
| [JavaScript] 웹에서 동작하는 계산기 앱 만들기 (0) | 2024.11.10 |
| [JavaScript] OpenStreetMap 지도 출력하여 특정 경로에 선 그리기 (2) | 2024.11.07 |