@ytb-dw/sdk
Version:
Official JavaScript SDK for ytb-dw YouTube download service - Download YouTube videos and audio with ease
254 lines (223 loc) • 8.44 kB
HTML
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ytb-dw SDK - Browser Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background: #007cba;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #005a87;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
.result {
background: white;
padding: 15px;
border-radius: 4px;
margin: 10px 0;
border-left: 4px solid #007cba;
}
.error {
background: #ffe6e6;
border-left-color: #d32f2f;
color: #d32f2f;
}
.success {
background: #e8f5e8;
border-left-color: #4caf50;
color: #2e7d2e;
}
.loading {
color: #666;
font-style: italic;
}
.format-list {
display: grid;
gap: 10px;
margin: 10px 0;
}
.format-item {
background: white;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<h1>🎬 ytb-dw SDK - Example Browser</h1>
<div class="container">
<h3>Configuration</h3>
<input type="password" id="apiKey" placeholder="Votre clé API ytb-dw" />
<input type="text" id="youtubeUrl" placeholder="URL YouTube (ex: https://youtube.com/watch?v=dQw4w9WgXcQ)"
value="https://youtube.com/watch?v=dQw4w9WgXcQ" />
</div>
<div class="container">
<h3>Actions</h3>
<button onclick="getVideoInfo()">đź“‹ Obtenir les informations</button>
<button onclick="downloadAudio()">🎵 Télécharger MP3</button>
<button onclick="downloadVideo720()">🎥 Télécharger 720p</button>
<button onclick="downloadVideoBest()">🎬 Télécharger Meilleure qualité</button>
</div>
<div id="results"></div>
<!-- Include the SDK -->
<script src="../index.js"></script>
<script>
let client = null;
function initClient() {
const apiKey = document.getElementById('apiKey').value;
if (!apiKey) {
showError('Veuillez entrer votre clé API');
return false;
}
client = new YtbDwClient(apiKey);
return true;
}
function getYouTubeUrl() {
const url = document.getElementById('youtubeUrl').value;
if (!url) {
showError('Veuillez entrer une URL YouTube');
return null;
}
return url;
}
function showResult(content, type = 'result') {
const results = document.getElementById('results');
const div = document.createElement('div');
div.className = `result ${type}`;
div.innerHTML = content;
results.appendChild(div);
results.scrollTop = results.scrollHeight;
}
function showError(message) {
showResult(`❌ Erreur: ${message}`, 'error');
}
function showSuccess(message) {
showResult(`âś… ${message}`, 'success');
}
function showLoading(message) {
showResult(`⏳ ${message}`, 'loading');
}
async function getVideoInfo() {
if (!initClient()) return;
const url = getYouTubeUrl();
if (!url) return;
showLoading('Récupération des informations de la vidéo...');
try {
const info = await client.getVideoInfo(url);
let formatsHtml = '';
if (info.formats && info.formats.length > 0) {
formatsHtml = `
<h4>Formats disponibles:</h4>
<div class="format-list">
${info.formats.map(format => `
<div class="format-item">
<span><strong>${format.type}</strong> - ${format.quality}</span>
<span>${format.size}</span>
</div>
`).join('')}
</div>
`;
}
const resultHtml = `
<h4>📋 Informations de la vidéo</h4>
<p><strong>Titre:</strong> ${info.title}</p>
<p><strong>Durée:</strong> ${info.duration}</p>
<p><strong>Auteur:</strong> ${info.uploader}</p>
<p><strong>Vues:</strong> ${info.view_count?.toLocaleString()}</p>
${formatsHtml}
`;
showResult(resultHtml, 'success');
} catch (error) {
showError(error.message);
}
}
async function downloadAudio() {
if (!initClient()) return;
const url = getYouTubeUrl();
if (!url) return;
try {
showLoading('Préparation du téléchargement audio...');
client.openDownload(url, { format: 'audio' });
showSuccess('Téléchargement audio lancé dans un nouvel onglet');
} catch (error) {
showError(error.message);
}
}
async function downloadVideo720() {
if (!initClient()) return;
const url = getYouTubeUrl();
if (!url) return;
try {
showLoading('Préparation du téléchargement vidéo 720p...');
client.openDownload(url, { format: 'video', quality: '720' });
showSuccess('Téléchargement vidéo 720p lancé dans un nouvel onglet');
} catch (error) {
showError(error.message);
}
}
async function downloadVideoBest() {
if (!initClient()) return;
const url = getYouTubeUrl();
if (!url) return;
try {
showLoading('Préparation du téléchargement vidéo (meilleure qualité)...');
client.openDownload(url, { format: 'video', quality: 'best' });
showSuccess('Téléchargement vidéo (meilleure qualité) lancé dans un nouvel onglet');
} catch (error) {
showError(error.message);
}
}
// Clear results
function clearResults() {
document.getElementById('results').innerHTML = '';
}
// Add clear button
document.querySelector('.container:last-of-type').innerHTML +=
'<button onclick="clearResults()">🗑️ Effacer les résultats</button>';
// Show initial instructions
showResult(`
<h4>đź‘‹ Bienvenue!</h4>
<p>1. Entrez votre clé API ytb-dw</p>
<p>2. Entrez une URL YouTube</p>
<p>3. Utilisez les boutons pour tester les fonctionnalités</p>
<p><em>Note: Cette page utilise le SDK directement côté client</em></p>
`);
</script>
</body>
</html>