Copy this html code for video downloader app. You can use it in your project.
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>
Video Player and Downloader App. Some video can not download.
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></link>
</head>
<body class="bg-gray-100 font-roboto">
<div class="container mx-auto p-4">
<div class="max-w-lg mx-auto bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-bold mb-4 text-center">
Video Player and Downloader
</h1>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="video-url">
Paste YouTube Video URL
</label>
<input class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" id="video-url" placeholder="Enter video URL here" type="text" />
</div>
<div class="mb-4 hidden" id="video-container">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="w-full rounded-lg" frameborder="0" height="315" id="video-player" src="">
</iframe>
</div>
<button class="w-full bg-green-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500" id="download-btn">
<i class="fas fa-download mr-2">
</i>
Download Video
</button>
</div>
</div>
<script>
document.getElementById('video-url').addEventListener('input', function() {
const url = this.value;
const videoId = getVideoId(url);
if (videoId) {
const embedUrl = getEmbedUrl(url, videoId);
if (embedUrl) {
document.getElementById('video-player').src = embedUrl;
document.getElementById('video-container').classList.remove('hidden');
} else {
document.getElementById('video-container').classList.add('hidden');
}
} else {
document.getElementById('video-container').classList.add('hidden');
}
});
document.getElementById('download-btn').addEventListener('click', function() {
const url = document.getElementById('video-url').value;
const videoId = getVideoId(url);
if (videoId) {
const downloadUrl = getDownloadUrl(url, videoId);
if (downloadUrl) {
window.open(downloadUrl, '_blank');
} else {
alert('Download not supported for this video.');
}
} else {
alert('Please enter a valid video URL.');
}
});
function getVideoId(url) {
const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const facebookRegex = /(?:https?:\/\/)?(?:www\.)?facebook\.com\/.*\/videos\/([0-9]+)/;
const instagramRegex = /(?:https?:\/\/)?(?:www\.)?instagram\.com\/(?:p|reel)\/([a-zA-Z0-9_-]+)/;
const tiktokRegex = /(?:https?:\/\/)?(?:www\.)?tiktok\.com\/.*\/video\/([0-9]+)/;
const youtubeMatch = url.match(youtubeRegex);
if (youtubeMatch) return { platform: 'youtube', id: youtubeMatch[1] };
const facebookMatch = url.match(facebookRegex);
if (facebookMatch) return { platform: 'facebook', id: facebookMatch[1] };
const instagramMatch = url.match(instagramRegex);
if (instagramMatch) return { platform: 'instagram', id: instagramMatch[1] };
const tiktokMatch = url.match(tiktokRegex);
if (tiktokMatch) return { platform: 'tiktok', id: tiktokMatch[1] };
return null;
}
function getEmbedUrl(url, videoId) {
switch (videoId.platform) {
case 'youtube':
return `https://www.youtube.com/embed/${videoId.id}`;
case 'facebook':
return `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(url)}`;
case 'instagram':
return `https://www.instagram.com/p/${videoId.id}/embed`;
case 'tiktok':
return `https://www.tiktok.com/embed/v2/${videoId.id}`;
default:
return null;
}
}
function getDownloadUrl(url, videoId) {
switch (videoId.platform) {
case 'youtube':
return `https://www.ssyoutube.com/watch?v=${videoId.id}`;
case 'facebook':
return `https://www.getfvid.com/downloader?url=${encodeURIComponent(url)}`;
case 'instagram':
return `https://www.downloadgram.com/?url=${encodeURIComponent(url)}`;
case 'tiktok':
return `https://www.ttdownloader.com/?url=${encodeURIComponent(url)}`;
default:
return null;
}
}
</script>
</body>
</html>
Comments
Post a Comment