File size: 4,729 Bytes
f442115 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yt-dlp Deployment Guide</title>
<style>
:root {
--primary: #2563eb;
--bg: #f8fafc;
--card: #ffffff;
--text: #1e293b;
--code-bg: #1e1e1e;
}
body {
font-family: 'Inter', system-ui, sans-serif;
line-height: 1.6;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
header {
text-align: center;
padding: 40px 0;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: white;
border-radius: 12px;
margin-bottom: 30px;
}
section {
background: var(--card);
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
h2 { border-left: 4px solid var(--primary); padding-left: 15px; color: var(--primary); }
pre {
background: var(--code-bg);
color: #dcdcdc;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
}
code { font-family: 'Fira Code', monospace; }
.badge {
display: inline-block;
background: #e2e8f0;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.85em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Universal Media Extraction Guide</h1>
<p>Mastering yt-dlp & FFmpeg for Web Deployment</p>
</header>
<section id="intro">
<h2>1. What is yt-dlp?</h2>
<p>yt-dlp is a feature-rich command-line media downloader. It is a fork of the original youtube-dl project, optimized for higher speeds and better compatibility with modern streaming protocols like DASH and HLS.</p>
</section>
<section id="setup">
<h2>2. Setting up on Hugging Face</h2>
<p>To run a yt-dlp website on the free tier, you need three files in your repository:</p>
<ul>
<li><strong>README.md:</strong> Set <code>sdk: gradio</code> and <code>python_version: 3.11</code>.</li>
<li><strong>packages.txt:</strong> Include <code>ffmpeg</code> to handle video/audio merging.</li>
<li><strong>requirements.txt:</strong> Include <code>yt-dlp</code> and <code>gradio</code>.</li>
</ul>
</section>
<section id="ffmpeg">
<h2>3. The FFmpeg Backbone</h2>
<p>High-quality web video is often served as separate <strong>Video-only</strong> and <strong>Audio-only</strong> streams. Without FFmpeg, your app is limited to low-quality legacy formats (usually 720p or lower).</p>
<p>FFmpeg acts as the "Muxer," joining these streams into a single MP4 or MKV file after the download is complete.</p>
</section>
<section id="code">
<h2>4. Working Website Implementation</h2>
<p>Below is a production-ready <code>app.py</code> for a Hugging Face Space. It uses Gradio for the UI and yt-dlp for the backend.</p>
<pre><code>import gradio as gr
import yt_dlp
import os
def download_video(url):
# Setup options with FFmpeg integration
ydl_opts = {
'format': 'bestvideo+bestaudio/best',
'outtmpl': 'downloads/%(title)s.%(ext)s',
# Ensure FFmpeg is used to merge streams
'postprocessors': [{
'key': 'FFmpegVideoConvertor',
'preferedformat': 'mp4',
}],
}
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
info = ydl.extract_info(url, download=True)
filename = ydl.prepare_filename(info).replace('.webm', '.mp4').replace('.mkv', '.mp4')
return filename
# Gradio Interface
with gr.Blocks(theme=gr.themes.Soft()) as demo:
gr.Markdown("# 🚀 Private Video Downloader")
url_input = gr.Textbox(label="Paste Link (YouTube, TikTok, Instagram, etc.)")
btn = gr.Button("Fetch Video", variant="primary")
output_file = gr.File(label="Download Ready")
btn.click(fn=download_video, inputs=url_input, outputs=output_file)
demo.launch()</code></pre>
</section>
<footer>
<p style="text-align: center; color: #64748b; font-size: 0.8em;">
Built for Hugging Face Free Tier • Uses yt-dlp Open Source
</p>
</footer>
</div>
</body>
</html> |