-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathytdl.html
95 lines (80 loc) · 3.18 KB
/
ytdl.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
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8ef543fcad.js" crossorigin="anonymous"></script>
<style>
html, body {
box-sizing: content-box;
}
body {
margin: 2rem;
font-family: "Montserrat";
* {
margin-bottom: 1rem;
}
}
iframe:not([src]) {
display: none;
}
select {
font-size: 1rem;
}
input {
width: 20rem;
}
</style>
</head>
<body>
<h1>Download YouTube video</h1>
<p style="display: inline;">Video URL:</p> <input type="text" id="url"> <button id="go">Go</button>
<iframe id="preview" width="533" height="300"></iframe>
<p id="loading">Loading...</p>
<div id="download">
<span>Choose video quality: </span><select></select><br>
<span>Choose audio quality: </span><select></select><br>
<a>Download!</a>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
function uniqueValues(array, mapFunc) {
return [...new Set(array.map(mapFunc).filter(q => q))];
}
const videoUrlRegex = /^https:\/\/(?:www\.)?youtube.com\/watch\?v=(?<id>[\w-]+)$/;
async function go() {
$("#preview, #loading, #download").hide();
$("option").remove();
$("#download select").off();
$("#download a").removeAttr("href");
let videoUrl = $("#url").val().trim();
let videoUrlMatch = videoUrl.match(videoUrlRegex);
if (!videoUrlMatch) return;
$("#preview").show().attr("src", `https://www.youtube.com/embed/${videoUrlMatch.id}?controls=0`);
$("#loading").show();
let videoInfo = await fetch(`https://www.htgnyt.dk/ytdl/info?url=${encodeURIComponent(videoUrl)}`);
let { formats } = await videoInfo.json();
$("#loading").hide();
$("#download").show();
let videoQualities = uniqueValues(formats, f => f.qualityLabel);
videoQualities.sort((a, b) => parseInt(b.match(/^\d+/)[0]) - parseInt(a.match(/^\d+/)[0]));
$("#download select:eq(0)").append(videoQualities.map(q => `<option data-value="${q}">${q}</option>`));
let audioQualities = uniqueValues(formats, f => f.audioBitrate);
audioQualities.sort((a, b) => b - a);
$("#download select:eq(1)").append(audioQualities.map(q => `<option data-value="${q}">${q}Kbps</option>`));
$("#download select").on("change", e => {
let videoQuality = $("#download select:eq(0) option:selected").data("value");
let videoItag = formats.find(f => f.qualityLabel == videoQuality).itag;
let audioQuality = $("#download select:eq(1) option:selected").data("value");
let audioItag = formats.find(f => f.audioBitrate == audioQuality).itag;
$("#download a").attr("href",
`https://www.htgnyt.dk/ytdl/video?url=${videoUrl}&video=${videoItag}&audio=${audioItag}`
);
}).trigger("change");
}
let pageVideoUrl = (new URL(location)).searchParams.get("url");
if (pageVideoUrl) $("#url").val(pageVideoUrl);
$("#preview, #loading, #download").hide();
$("#go").on("click", go);
</script>
</body>
</html>