| <!DOCTYPE html>
|
| <html lang="vi">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Video Downloader Online - yt-dlp API</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <style>
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| body { font-family: 'Inter', sans-serif; }
|
| .gradient-bg {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| }
|
| .glass-effect {
|
| background: rgba(255, 255, 255, 0.1);
|
| backdrop-filter: blur(10px);
|
| border: 1px solid rgba(255, 255, 255, 0.2);
|
| }
|
| .preview-placeholder {
|
| background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
|
| linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
|
| linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
|
| linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
|
| background-size: 20px 20px;
|
| background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
| }
|
| .spinner {
|
| animation: spin 1s linear infinite;
|
| }
|
| @keyframes spin {
|
| from { transform: rotate(0deg); }
|
| to { transform: rotate(360deg); }
|
| }
|
| video {
|
| max-width: 100%;
|
| height: auto;
|
| }
|
| </style>
|
| </head>
|
| <body class="gradient-bg min-h-screen">
|
|
|
| <div id="apiStatus" class="fixed top-4 right-4 z-50"></div>
|
|
|
| <div class="container mx-auto px-4 py-8">
|
|
|
| <div class="text-center mb-12">
|
| <h1 class="text-5xl font-bold text-white mb-4">
|
| 🎬 Video Downloader
|
| </h1>
|
| <p class="text-xl text-white/80 max-w-2xl mx-auto">
|
| Tải video từ YouTube và các trang web khác sử dụng yt-dlp API
|
| </p>
|
| </div>
|
|
|
|
|
| <div class="max-w-6xl mx-auto">
|
| <div class="grid lg:grid-cols-2 gap-8">
|
|
|
| <div class="glass-effect rounded-2xl p-8">
|
| <h2 class="text-2xl font-semibold text-white mb-6 flex items-center">
|
| 📥 Nhập Liên Kết
|
| </h2>
|
|
|
| <div class="space-y-6">
|
| <div>
|
| <label class="block text-white/90 text-sm font-medium mb-3">
|
| URL Video
|
| </label>
|
| <input
|
| type="url"
|
| id="videoUrl"
|
| placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
| value="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
| class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all"
|
| >
|
| </div>
|
|
|
| <div>
|
| <label class="block text-white/90 text-sm font-medium mb-3">
|
| Chất Lượng
|
| </label>
|
| <select id="qualitySelect" class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all">
|
| <option value="best" class="bg-gray-800">Tốt nhất</option>
|
| <option value="worst" class="bg-gray-800">Thấp nhất (nhanh hơn)</option>
|
| <option value="720p" class="bg-gray-800">720p (HD)</option>
|
| <option value="480p" class="bg-gray-800">480p (SD)</option>
|
| <option value="360p" class="bg-gray-800">360p</option>
|
| </select>
|
| </div>
|
|
|
| <div>
|
| <label class="block text-white/90 text-sm font-medium mb-3">
|
| Định Dạng
|
| </label>
|
| <div class="flex gap-3">
|
| <label class="flex items-center cursor-pointer">
|
| <input type="radio" name="format" value="video" checked class="sr-only">
|
| <div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center mr-2">
|
| <div class="w-2 h-2 rounded-full bg-blue-400"></div>
|
| </div>
|
| <span class="text-white/90">Video</span>
|
| </label>
|
| <label class="flex items-center cursor-pointer">
|
| <input type="radio" name="format" value="audio" class="sr-only">
|
| <div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center mr-2">
|
| <div class="w-2 h-2 rounded-full bg-transparent"></div>
|
| </div>
|
| <span class="text-white/90">Audio MP3</span>
|
| </label>
|
| </div>
|
| </div>
|
|
|
| <div class="flex gap-3">
|
| <button
|
| onclick="getVideoInfo()"
|
| class="flex-1 bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg"
|
| >
|
| 🔍 Xem Thông Tin
|
| </button>
|
| <button
|
| onclick="downloadVideo()"
|
| class="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg"
|
| >
|
| 🚀 Tải Xuống
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="glass-effect rounded-2xl p-8">
|
| <h2 class="text-2xl font-semibold text-white mb-6 flex items-center">
|
| 👁️ Thông Tin Video
|
| </h2>
|
|
|
| <div id="previewContainer" class="space-y-4">
|
| <div class="preview-placeholder rounded-xl h-48 flex items-center justify-center">
|
| <div class="text-center text-gray-500">
|
| <div class="text-4xl mb-2">🎥</div>
|
| <p>Nhấn "Xem Thông Tin" để hiển thị chi tiết video</p>
|
| </div>
|
| </div>
|
|
|
| <div class="bg-white/5 rounded-xl p-4">
|
| <h3 id="videoTitle" class="text-white font-medium mb-2">Tiêu đề video sẽ hiển thị ở đây</h3>
|
| <div class="flex justify-between text-sm text-white/70">
|
| <span id="videoDuration">Thời lượng: --:--</span>
|
| <span id="videoViews">Lượt xem: --</span>
|
| </div>
|
| <div class="mt-2 text-sm text-white/70">
|
| <span id="videoUploader">Kênh: --</span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="glass-effect rounded-2xl p-8 mt-8">
|
| <h2 class="text-2xl font-semibold text-white mb-6 flex items-center">
|
| 📤 Kết Quả Tải Xuống
|
| </h2>
|
|
|
| <div id="outputContainer" class="space-y-4">
|
| <div class="bg-white/5 rounded-xl p-6 text-center">
|
| <div class="text-4xl mb-4">⏳</div>
|
| <p class="text-white/70">Chưa có video nào được xử lý</p>
|
| <p class="text-sm text-white/50 mt-2">Nhập URL và nhấn "Tải Xuống" để bắt đầu</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="glass-effect rounded-2xl p-8 mt-8">
|
| <h2 class="text-2xl font-semibold text-white mb-6 text-center">
|
| 🌐 Trang Web Được Hỗ Trợ (yt-dlp)
|
| </h2>
|
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
| <div class="bg-white/10 rounded-lg p-4 text-center">
|
| <div class="text-2xl mb-2">📺</div>
|
| <span class="text-white/80 text-sm">YouTube</span>
|
| </div>
|
| <div class="bg-white/10 rounded-lg p-4 text-center">
|
| <div class="text-2xl mb-2">📱</div>
|
| <span class="text-white/80 text-sm">TikTok</span>
|
| </div>
|
| <div class="bg-white/10 rounded-lg p-4 text-center">
|
| <div class="text-2xl mb-2">📘</div>
|
| <span class="text-white/80 text-sm">Facebook</span>
|
| </div>
|
| <div class="bg-white/10 rounded-lg p-4 text-center">
|
| <div class="text-2xl mb-2">📷</div>
|
| <span class="text-white/80 text-sm">Instagram</span>
|
| </div>
|
| <div class="bg-white/10 rounded-lg p-4 text-center">
|
| <div class="text-2xl mb-2">🐦</div>
|
| <span class="text-white/80 text-sm">Twitter</span>
|
| </div>
|
| <div class="bg-white/10 rounded-lg p-4 text-center">
|
| <div class="text-2xl mb-2">🎵</div>
|
| <span class="text-white/80 text-sm">Vimeo</span>
|
| </div>
|
| </div>
|
| <div class="text-center mt-4">
|
| <p class="text-white/60 text-sm">và hàng nghìn trang web khác được hỗ trợ bởi yt-dlp</p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| // Auto-detect API base URL
|
| const API_BASE = window.location.origin;
|
| let currentVideoInfo = null;
|
|
|
| // Handle radio button visual feedback
|
| document.querySelectorAll('input[name="format"]').forEach(radio => {
|
| radio.addEventListener('change', function() {
|
| document.querySelectorAll('input[name="format"]').forEach(r => {
|
| const circle = r.parentElement.querySelector('div div');
|
| if (r.checked) {
|
| circle.classList.add('bg-blue-400');
|
| circle.classList.remove('bg-transparent');
|
| } else {
|
| circle.classList.remove('bg-blue-400');
|
| circle.classList.add('bg-transparent');
|
| }
|
| });
|
| });
|
| });
|
|
|
| // Show API status indicator
|
| function showApiStatus(status, message) {
|
| const statusDiv = document.getElementById('apiStatus');
|
| const statusClass = status === 'ok' ? 'bg-green-500' : status === 'loading' ? 'bg-yellow-500' : 'bg-red-500';
|
| statusDiv.innerHTML = `
|
| <div class="${statusClass} text-white px-4 py-2 rounded-lg shadow-lg flex items-center">
|
| <div class="mr-2">${status === 'ok' ? '✅' : status === 'loading' ? '⏳' : '❌'}</div>
|
| <span class="text-sm">${message}</span>
|
| </div>
|
| `;
|
| }
|
|
|
| // Check API status on load
|
| async function checkApiStatus() {
|
| showApiStatus('loading', 'Đang kiểm tra API...');
|
| try {
|
| const response = await fetch(`${API_BASE}/status`);
|
| const data = await response.json();
|
| if (data.status === 'ok') {
|
| showApiStatus('ok', `API sẵn sàng - yt-dlp ${data.yt_dlp_version}`);
|
| } else {
|
| showApiStatus('error', 'API có lỗi');
|
| }
|
| } catch (error) {
|
| showApiStatus('error', 'Không thể kết nối API');
|
| }
|
| }
|
|
|
| // Get video information
|
| async function getVideoInfo() {
|
| const url = document.getElementById('videoUrl').value.trim();
|
| if (!url) {
|
| alert('Vui lòng nhập URL video!');
|
| return;
|
| }
|
|
|
| // Show loading state
|
| const previewContainer = document.getElementById('previewContainer');
|
| previewContainer.innerHTML = `
|
| <div class="bg-gray-800 rounded-xl h-48 flex items-center justify-center">
|
| <div class="text-center text-white">
|
| <div class="text-4xl mb-4 spinner">⚙️</div>
|
| <p>Đang lấy thông tin video...</p>
|
| </div>
|
| </div>
|
| <div class="bg-white/5 rounded-xl p-4">
|
| <div class="animate-pulse">
|
| <div class="h-4 bg-white/20 rounded mb-2"></div>
|
| <div class="h-3 bg-white/10 rounded"></div>
|
| </div>
|
| </div>
|
| `;
|
|
|
| try {
|
| const response = await fetch(`${API_BASE}/video-info`, {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ url })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok) {
|
| currentVideoInfo = data;
|
| updatePreview(data);
|
| } else {
|
| showError(data.error || 'Không thể lấy thông tin video');
|
| }
|
| } catch (error) {
|
| showError(`Lỗi kết nối: ${error.message}`);
|
| }
|
| }
|
|
|
| // Update preview with video info
|
| function updatePreview(videoInfo) {
|
| const duration = videoInfo.duration ?
|
| `${Math.floor(videoInfo.duration / 60)}:${(videoInfo.duration % 60).toString().padStart(2, '0')}` :
|
| 'N/A';
|
|
|
| const views = videoInfo.view_count ?
|
| videoInfo.view_count.toLocaleString('vi-VN') :
|
| 'N/A';
|
|
|
| document.getElementById('previewContainer').innerHTML = `
|
| <div class="bg-gray-800 rounded-xl h-48 flex items-center justify-center relative overflow-hidden">
|
| ${videoInfo.thumbnail ?
|
| `<img src="${videoInfo.thumbnail}" alt="Thumbnail" class="w-full h-full object-cover rounded-xl">` :
|
| `<div class="text-center text-white">
|
| <div class="text-6xl mb-2">🎬</div>
|
| <p class="text-sm opacity-75">Video Preview</p>
|
| </div>`
|
| }
|
| <div class="absolute inset-0 bg-black/20 rounded-xl"></div>
|
| <div class="absolute bottom-4 right-4 bg-black/70 text-white px-2 py-1 rounded text-sm">
|
| ${duration}
|
| </div>
|
| </div>
|
| <div class="bg-white/5 rounded-xl p-4">
|
| <h3 class="text-white font-medium mb-2">${videoInfo.title || 'Không có tiêu đề'}</h3>
|
| <div class="flex justify-between text-sm text-white/70">
|
| <span>Thời lượng: ${duration}</span>
|
| <span>Lượt xem: ${views}</span>
|
| </div>
|
| <div class="mt-2 text-sm text-white/70">
|
| <span>Kênh: ${videoInfo.uploader || 'N/A'}</span>
|
| </div>
|
| <div class="mt-2 text-xs text-white/50">
|
| ${videoInfo.formats?.length || 0} định dạng có sẵn
|
| </div>
|
| </div>
|
| `;
|
| }
|
|
|
| // Download video
|
| async function downloadVideo() {
|
| const url = document.getElementById('videoUrl').value.trim();
|
| const quality = document.getElementById('qualitySelect').value;
|
| const format = document.querySelector('input[name="format"]:checked').value;
|
|
|
| if (!url) {
|
| alert('Vui lòng nhập URL video!');
|
| return;
|
| }
|
|
|
| // Show loading state
|
| const outputContainer = document.getElementById('outputContainer');
|
| outputContainer.innerHTML = `
|
| <div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6 text-center">
|
| <div class="text-4xl mb-4 spinner">⚙️</div>
|
| <p class="text-white mb-2">Đang tải video...</p>
|
| <p class="text-white/70 text-sm">Chất lượng: ${quality} | Định dạng: ${format === 'audio' ? 'MP3' : 'Video'}</p>
|
| <div class="w-full bg-white/10 rounded-full h-2 mt-4">
|
| <div class="bg-blue-500 h-2 rounded-full animate-pulse" style="width: 60%"></div>
|
| </div>
|
| <p class="text-white/60 text-xs mt-2">Thời gian tải phụ thuộc vào kích thước và chất lượng video</p>
|
| </div>
|
| `;
|
|
|
| try {
|
| const response = await fetch(`${API_BASE}/download`, {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ url, format, quality })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok) {
|
| showDownloadSuccess(data);
|
| } else {
|
| showError(data.error || 'Không thể tải video');
|
| }
|
| } catch (error) {
|
| showError(`Lỗi kết nối: ${error.message}`);
|
| }
|
| }
|
|
|
| // Show download success with video player
|
| function showDownloadSuccess(data) {
|
| const outputContainer = document.getElementById('outputContainer');
|
| const isVideo = data.format === 'video';
|
| const fileSize = (data.size / (1024 * 1024)).toFixed(2);
|
|
|
| outputContainer.innerHTML = `
|
| <div class="bg-green-500/10 border border-green-500/30 rounded-xl p-6">
|
| <div class="flex items-center justify-between mb-4">
|
| <div class="flex items-center">
|
| <div class="text-2xl mr-3">✅</div>
|
| <div>
|
| <h3 class="text-white font-medium">Tải xuống thành công!</h3>
|
| <p class="text-white/70 text-sm">${data.originalTitle}</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| ${isVideo ? `
|
| <div class="bg-black rounded-xl p-4 mb-4">
|
| <video controls class="w-full rounded-lg" poster="${data.thumbnail || ''}">
|
| <source src="${data.direct_link}" type="video/mp4">
|
| Trình duyệt của bạn không hỗ trợ video HTML5.
|
| </video>
|
| </div>
|
| ` : `
|
| <div class="bg-black/20 rounded-xl p-4 mb-4 flex items-center justify-center">
|
| <div class="text-center text-white">
|
| <div class="text-6xl mb-2">🎵</div>
|
| <p class="text-lg font-medium">Audio MP3</p>
|
| <audio controls class="mt-4">
|
| <source src="${data.direct_link}" type="audio/mpeg">
|
| Trình duyệt của bạn không hỗ trợ audio HTML5.
|
| </audio>
|
| </div>
|
| </div>
|
| `}
|
|
|
| <div class="bg-white/5 rounded-lg p-4 mb-4">
|
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-white/70">
|
| <div>
|
| <span class="block font-medium text-white">ID File:</span>
|
| ${data.fileId}
|
| </div>
|
| <div>
|
| <span class="block font-medium text-white">Kích thước:</span>
|
| ${fileSize} MB
|
| </div>
|
| <div>
|
| <span class="block font-medium text-white">Định dạng:</span>
|
| ${data.format === 'audio' ? 'MP3' : 'MP4'}
|
| </div>
|
| <div>
|
| <span class="block font-medium text-white">Thời gian xóa:</span>
|
| ${data.expires_in}
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="flex gap-3">
|
| <a href="${data.direct_link}"
|
| download="${data.filename}"
|
| class="flex-1 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition-colors text-center font-medium">
|
| 📥 Tải về máy
|
| </a>
|
| <button onclick="copyLink('${data.direct_link}')"
|
| class="flex-1 bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg transition-colors font-medium">
|
| 🔗 Copy Link
|
| </button>
|
| </div>
|
|
|
| <div class="text-center mt-4">
|
| <p class="text-white/60 text-sm">
|
| ⚠️ File sẽ tự động xóa sau ${data.expires_in} kể từ khi tải xuống
|
| </p>
|
| </div>
|
| </div>
|
| `;
|
| }
|
|
|
| // Copy link to clipboard
|
| function copyLink(link) {
|
| navigator.clipboard.writeText(link).then(() => {
|
| alert('Link đã được copy vào clipboard!');
|
| }).catch(() => {
|
| alert('Không thể copy link. Hãy copy thủ công: ' + link);
|
| });
|
| }
|
|
|
| // Show error
|
| function showError(message) {
|
| const outputContainer = document.getElementById('outputContainer');
|
| outputContainer.innerHTML = `
|
| <div class="bg-red-500/10 border border-red-500/30 rounded-xl p-6 text-center">
|
| <div class="text-4xl mb-4">❌</div>
|
| <p class="text-white mb-2">Có lỗi xảy ra</p>
|
| <p class="text-red-300 text-sm">${message}</p>
|
| <button onclick="checkApiStatus()" class="mt-4 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors text-sm">
|
| 🔄 Kiểm tra lại API
|
| </button>
|
| </div>
|
| `;
|
| }
|
|
|
| // Initialize app
|
| window.onload = function() {
|
| checkApiStatus();
|
| document.getElementById('videoUrl').focus();
|
| };
|
| </script>
|
| </body>
|
| </html>
|
|
|
