vdl.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비디오 다운로드 시스템</title>
    <script>
        async function downloadVideo() {
            const url = document.getElementById('video-url').value;
            const quality = document.getElementById('video-quality').value; // 품질 옵션 선택
            const referer = document.getElementById('video-referer').value; // 리퍼러 옵션 선택
            const response = await fetch('http://localhost:5000/download', { // 로컬 Flask 서버의 URL
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ url, quality, referer }), // URL, 품질, 리퍼러 함께 전송
            });

            const result = await response.json();
            alert(result.message || result.error);
        }
    </script>
</head>
<body>
    <h1>비디오 다운로드 시스템</h1>
    <input type="text" id="video-url" placeholder="비디오 URL 입력" />
    <select id="video-quality">     <!-- 품질 선택을 위한 드롭다운 추가 -->
        <option value="best">최고 품질</option>
        <option value="worst">최저 품질</option>
        <option value="bestaudio">오디오만 다운로드</option>
    </select>
    <input type="text" id="video-referer" placeholder="리퍼러 URL 입력" /> <!-- 리퍼러 입력 필드 추가 -->
    <button onclick="downloadVideo()">다운로드</button>
</body>
</html>