-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
336 lines (323 loc) · 15.5 KB
/
index.html
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YT-DLP Command Builder</title>
<link
href="https://unpkg.com/remixicon/fonts/remixicon.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
/>
<link rel="stylesheet" href="style.css" />
<script type="module" src="main.js" defer></script>
<link
href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEHBv8BAxb/CQwa/wkTB/8kLiL/IzAo/yMtIf8IEQf/DBYJ/wQOAv8JEgj/DxkM/wAAAAAAAAAAAAAAADg8Mf+TqOX/fJvq/1poov8ECQD/Fx8Y/xMZE/8jJyH/Jy4n/xssHv8SHxf/DRkN/xAYEf8AAAAAAAAAAG5ubw5MUEr/rMT0/6S49f89R5X/BhIM/xMcEv8sNC3/Lzcw/zA5L/8vOC7/IS8j/xceF/8TGhX/AAAAAAAAAAAAAAAAUFVT/0VJSf/Q2+D/IS40/ywzLv8rMyn/LDou/y84Lv8wOS//MDgu/y02LP8bLB//GR4d/wAAAAAAAAAAAAAAAFldX8khJxz/ERgR/w8ZM/+Wn9//LDMo/yIzJ/8hMSb/JzEl/yArIf8pNCj/HCoe/xgfGP8AAAAAAAAAAAAAAAAAAAAARkhI9xcbFf8dKzH/lrbx/87b7/8gIBr/CRII/wcRBP8fJh//ISki/xskGv8XHhf/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEx8N/6Kn1/+ChrD/bXuF/77D2P8ZJiP/AAYB/w0WDP8OGAv/DRYM/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHuEmP8sNUL/U1pu/5Cesf98kbD/uMPV/7a90P+irLz/AAEC/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAENlZQJFR1H/Ehoh/3J8mv+frMb/mbLS/2eCq/+CoMT/jKS6/2Fwgf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbGx6/wUSIv+RlbH/0Nbp/5avz/+Urtb/dZK+/2+Ktv9LW3X/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF1hc/+xtMn/0NHf/5ywz/+DncL/p77e/4+o1P9xirb/OVVy/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhccP8FFS7/ytPi/6693v9CVIP/Eys//1ZtmP9vkr3/d5K+/y1Qef8/U23/AAAAAAAAAAAAAAAAAAAAAAAAAABFVWL/Ynib/668z/+Dqcn/UXau/3Sbx/+Ep8n/gpfE/zxfjf8mRW7/JENq/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGZyiv+5t83/labD/2SJtf9xmL//f5bD/1Nql/8oRWz/JEdo/xY6WP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnNj//dn2M/6atvP9/krP/cois/22Dp/9HYYb/I0Bf/xMuQv8jOUoSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8SEr/XGdw/2Jte/9GU2P/MDpJ/wAAAAAAAAAAAAAAAAAAAAAAAAAAwAMAAIADAACAAwAAgAMAAIADAADAAwAA8AMAAPAHAADwBwAA8AcAAPAHAADgAwAA4AMAAPADAADwBwAA/B8AAA=="
rel="icon"
type="image/x-icon"
/>
</head>
<body>
<div class="container">
<h1>yt-dlp — Command Builder</h1>
<p>
This page will help you build a <code>yt-dlp</code> command. <em>
It will not run it—you'll have to run it yourself.
</em>
</p>
<p>It is assumed that:
<ul>
<li>You know what <code>yt-dlp</code> is and does.</li>
<li><code>yt-dlp</code> is installed on your computer as a PATH variable.</li>
<li><code>ffmpeg</code> is installed on your computer as a PATH variable.</li>
<li>You know how to use the terminal.</li>
</ul>
</p>
<p>
If you have more questions about
usage,
<a
href="https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#usage-and-options"
target="_blank"
>go see the official documentation</a
>. If you want to contribute on this project, <a href="https://github.com/thelegend09/yt-dlp-builder">you can</a>!
</p>
<!-- Form for command options -->
<form id="commandForm">
<fieldset>
<legend>What to download</legend>
<div>
<label for="url"
>Video URL (<a class="click-to-paste">Paste URL from clipboard</a
>)</label
>
<input
type="text"
id="url"
name="url"
required
value=""
/>
</div>
<div>
<label for="playlist">Is it a playlist?</label>
<select id="playlist" name="playlist">
<option value="">Select Option</option>
<option value="--yes-playlist">Yes</option>
<option value="--no-playlist">No</option>
</select>
</div>
</fieldset>
<!-- Extract Audio -->
<fieldset class="audio-section">
<legend>Audio Parameters</legend>
<p class="note">
Note: If you don't want to download only the audio, leave these
fields blank.
</p>
<div class="side-by-side">
<div>
<label for="extractAudio"
>Convert to audio?<popup
>Convert video files to audio-only files (requires ffmpeg and
ffprobe)</popup
></label
>
<select id="extractAudio" name="extractAudio">
<option value="">Select Option</option>
<option value="--extract-audio">Yes</option>
<option value="">No</option>
</select>
</div>
<div>
<!-- Audio Format -->
<label for="audioFormat"
>Audio Format<popup
>Format to convert the audio to when -x is used. (currently
supported: best (default), aac, alac, flac, m4a, mp3, opus,
vorbis, wav).</popup
></label
>
<select id="audioFormat" name="audioFormat">
<option value="">Select Format</option>
<option value="--audio-format best">best</option>
<option value="--audio-format mp3">mp3</option>
<option value="--audio-format aac">aac</option>
<option value="--audio-format opus">opus</option>
<option value="--audio-format vorbis">vorbis</option>
<option value="--audio-format flac">flac</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="video-section">
<legend>Video Parameters</legend>
<!-- Video Format -->
<div>
<label for="format"
>Video Format
<a
onClick="document.querySelector('#format').value = '"bestvideo[height=1080]+bestaudio/best[height<=1080]/best"'"
>(Restore default?)</a
><popup
>Resolution and audio. Default value will get the best video
resolution up to 1080p, along with the best audio.</popup
></label
>
<!-- prettier-ignore -->
<textarea type="text" id="format" name="--format" rows="1">"bestvideo[height=1080]+bestaudio/best[height<=1080]/best"</textarea
>
</div>
<!-- Merge Output Format -->
<div>
<label for="merge-output-format">Convert video</label>
<select id="merge-output-format" name="merge-output-format">
<option value="--merge-output-format mp4">MP4</option>
<option value="">auto</option>
<option value="--merge-output-format webm">WEBM</option>
<option value="--merge-output-format mkv">MKV</option>
<option value="--merge-output-format mov">MOV</option>
<option value="--merge-output-format avi">AVI</option>
<option value="--merge-output-format flv">FLV</option>
</select>
</div>
<details>
<summary>More details</summary>
<h3>Video Format</h3>
<ol>
<li>
<p>
<strong>Filtering Video Formats</strong>: You can choose the
quality of the video you want to download. For example, if you
want a high-quality video, you can type
<code>-f "best[height=720]"</code>. If you want a
video that is larger than 10MB, you can type
<code>-f "[filesize>10M]"</code>.
</p>
</li>
<li>
<p>
<strong>Comparisons</strong>: You can use symbols like
<code><</code>, <code><=</code>, <code>></code>,
<code>>=</code>, <code>=</code>, <code>!=</code> to compare
the video's properties. For example,
<code>height<480</code> means the video's height is
less than 480 pixels.
</p>
</li>
<li>
<p>
<strong>Meta Fields</strong>: These are properties of the
video. Some examples are <code>filesize</code> (how big the
video file is), <code>width</code> (how wide the video is),
<code>height</code> (how tall the video is), and
<code>fps</code> (how many frames per second the video has).
You can use these fields in your filters.
</p>
</li>
<li>
<p>
<strong>String Comparisons</strong>: You can also filter
videos based on text properties. For example,
<code>url</code> (the web address of the video),
<code>ext</code> (the video file's extension),
<code>acodec</code> (the audio codec used), and
<code>vcodec</code> (the video codec used). You can use
symbols like <code>=</code>, <code>^=</code>, <code>$=</code>,
<code>*=</code>, <code>~=</code>, <code>!=</code> to compare
these properties.
</p>
</li>
<li>
<p>
<strong>Grouping Selectors</strong>: You can group format
selectors using parentheses. For example,
<code>-f "(mp4,webm)[height<480]"</code> will
download the best mp4 or webm video that is less than 480
pixels tall.
</p>
</li>
</ol>
<p>
Remember, not all these properties are always available for every
video. It depends on the information provided by the website
you're downloading from. If a property is not known, you can
add a question mark (?) after the operator. For example,
<code>height<=?720</code> selects videos up to 720p, or videos
where the height is not known.
</p>
</details>
</fieldset>
<fieldset class="misc-section">
<legend>Misc</legend>
<div>
<!-- Split chapters -->
<label for="splitChapters"
>Split chapters<popup
>Split video into multiple files based on internal chapters. The
"chapter:" prefix can be used with "--paths" and "--output" to
set the output filename for the split files.</popup
></label
>
<select id="splitChapters" name="splitChapters">
<option value="">Select Option</option>
<option value="--split-chapters">Yes</option>
<option value="">No</option>
</select>
</div>
</fieldset>
<label for="show-advanced">
<input type="checkbox" name="show-advanced" id="show-advanced" />Show
advanced settings</label
>
<fieldset class="section-advanced">
<legend>Advanced</legend>
<div class="side-by-side">
<div>
<label for="remuxVideo"
>Remux Video<popup
>Remux the video into another container if necessary
(currently supported: avi, flv, gif, mkv, mov, mp4, webm, aac,
aiff, alac, flac, m4a, mka, mp3, ogg, opus, vorbis, wav). If
target container does not support the video>audio codec,
remuxing will fail. You can specify multiple rules; e.g.
"aac>m4a/mov>mp4/mkv" will remux aac to m4a, mov to mp4 and
anything else to mkv</popup
></label
>
<input
type="text"
id="remuxVideo"
name="remuxVideo"
placeholder="e.g. mkv"
/>
</div>
<div>
<label for="formatSort">Format Sort<popup></popup></label>
<input
type="text"
id="formatSort"
name="--formatSort"
placeholder="e.g. size,br"
/>
</div>
</div>
<div>
<label for="postprocessorArgs"
>Postprocessor Args<popup
>Give these arguments to the postprocessors. Specify the
postprocessor/executable name and the arguments separated by a
colon ":" to give the argument to the specified
postprocessor/executable. Supported PP are: Merger,
ModifyChapters, SplitChapters, ExtractAudio, VideoRemuxer,
VideoConvertor, Metadata, EmbedSubtitle, EmbedThumbnail,
SubtitlesConvertor, ThumbnailsConvertor, FixupStretched,
FixupM4a, FixupM3u8, FixupTimestamp and FixupDuration. The
supported executables are: AtomicParsley, FFmpeg and FFprobe.
You can also specify "PP+EXE:ARGS" to give the arguments to the
specified executable only when being used by the specified
postprocessor. Additionally, for ffmpeg/ffprobe, "_i"/"_o" can
be appended to the prefix optionally followed by a number to
pass the argument before the specified input/output file, e.g.
--ppa "Merger+ffmpeg_i1:-v quiet". You can use this option
multiple times to give different arguments to different
postprocessors. (Alias: --ppa)</popup
></label
>
<textarea
type="text"
id="postprocessorArgs"
name="--postprocessorArgs"
placeholder="e.g. Merger+ffmpeg_i1:-v quiet"
rows="1"
></textarea>
</div>
</fieldset>
</form>
<div class="result">
<div class="side-by-side">
<button type="submit" id="generate-command">Generate Command</button>
<span>Copied to clipboard!</span>
</div>
<!-- Display the generated command -->
<h2>Generated Command:</h2>
<textarea id="generatedCommand" rows="4" style="width: 100%"></textarea>
<p>Paste the above in the terminal, hit enter, and you should be good to go!</p>
<p class="note">
Some comments about the generated command:
<ul>
<li><code>--no-mtime</code> means that the "modified date" of the file on Windows will
be the date when you downloaded the file, as opposed to the default behavior, which would be to keep the upload date.
</li>
<li><code>-o "~/Downloads/%(title)s.%(ext)s"</code> means that the output file will be name like <code>Never Gonna Give You Up.mp4</code> and will be placed in your default Downloads folder.</li>
</ul>
</p>
</div>
</div>
</body>
</html>