Отказ от ответственности
Загрузка видео с YouTube противоречит политике YouTube. Единственные видео, которые вам разрешено скачивать, - это ваши собственные, что вы уже можете делать с помощью YouTube Studio.
Создание загрузчика YouTube может показаться действительно сложным, но на самом деле это не так. Для создания загрузчика YouTube необходимо знать некоторые HTML, JavaScript и Node.js, и вы должны быть достаточно хорошо в состоянии создать свой собственный загрузчик YouTube.
HTML
Если у вас будет загрузчик с YouTube, вам понадобится HTML для создания элементов, которые мы собираемся использовать для взаимодействия с нашим веб-сайтом. Во-первых, я создал простой HTML-документ с заголовком, полем ввода и кнопкой. Итак, сначала создайте HTML-файл с именем index.html. Это HTML-код нашей простой веб-страницы:
<!DOCTYPE html>
<html>
<head>
<title>YouTube Downloader</title>
</head>
<body>
<h1 class="heading">My Own YouTube Downloader !</h1>
<input class="URL-input" placeholder="Video URL e.g. https://www.youtube.com/watch?v=MtN1YnoL46Q">
<button class="convert-button">Convert</button>
</body>
</html>
Результат:
CSS
После этого мы добавим стили к нашей странице с помощью CSS. Вы можете использовать CSS-фреймворки, такие как Bootstrap или Bulma. Итак, сначала я связал свой файл CSS (style.css), добавив тег ссылки внутри заголовка:
<link rel="stylesheet" href="style.css">
Затем в style.css мы можем настроить нашу веб-страницу. Итак, вот мой простой код CSS для действительно простого стиля:
* {
text-align: center;
}
.heading {
font-family: Arial;
margin-top:40vh;
}
.URL-input, .convert-button {
font-size:1.3em;
padding:5px 10px;
}
.URL-input {
border-radius:4px 0px 0px 4px;
width:30em;
text-align: left;
border:2px solid #EEEEEE;
background: #EEEEEE;
outline:none;
}
.URL-input:focus {
border:2px solid #0485ff;
}
.convert-button {
border-radius:0px 4px 4px 0px;
border:2px solid #0485ff;
background: #0485ff;
color:white;
}
JavaScript и Node.js
Теперь нам нужно настроить наш JavaScript и наш сервер Node.js. Сначала давайте создадим файл JavaScript. Назовем его script.js. Затем мы собираемся связать его с нашим HTML-файлом, добавив теги скрипта внизу (очень важно).
<script src='script.js'></script>
В файле script.js мы собираемся записать этот небольшой фрагмент кода, выводящий на консоль значение ввода. Мы делаем это, чтобы убедиться, что все работает.
var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
console.log(`URL: ${URLinput.value}`);
sendURL(URLinput.value);
});
function sendURL(URL) {
// We will put code here later
}
Функция sendURL() отправит URL на наш сервер. Теперь мы собираемся начать писать код для нашего Сервера с использованием Node.js. Сначала мы создадим папку с именем Server, а затем создадим файл с именем index.js внутри папки Server. Это будет код для запуска сервера. После создания файла нам нужно запустить эту команду в командной строке или терминале в папке Server:
npm init
Вам будет задан ряд вопросов о проекте. Все ответы по умолчанию подойдут. После этого мы собираемся установить несколько пакетов, которые собираемся использовать.
Введите команду ниже, чтобы установить необходимые пакеты: express, ytdl-core и cors.
npm install express cors ytdl-core
Чтобы настроить наш сервер, нам нужно ввести код в файл index.js. Нам нужно потребовать пакеты и настроить сервер:
const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.listen(4000, () => {
console.log('Server Works !!! At port 4000');
});
Вот небольшая настройка. Нам потребовались пакеты, и мы заставили сервер прослушивать порт 4000.
Если мы введем в командной строке / терминале:
node index.js
мы должны увидеть Server Works !!! At port 4000. Если вы не поняли, значит, вы сделали что-то не так.
После этого нам нужно заставить сервер прислушиваться к получению запроса на пути /download. Итак, мы добавили это:
const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.use(cors());
app.listen(4000, () => {
console.log('Server Works !!! At port 4000');
});
app.get('/download', (req,res) => {
var URL = req.query.URL;
res.json({url:URL});
})
поэтому, когда пользователь отправляет запрос GET на сервер по пути /download, сервер ответит запросом, вставленным с запросом. Вернемся к интерфейсу и попробуем заставить JavaScript отправлять GET-запрос на сервер. Кроме того, я использовал промежуточное ПО cors(), чтобы мой сервер мог получать запросы. Я использовал fetch() для отправки запроса из JavaScript:
var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
console.log(`URL: ${URLinput.value}`);
sendURL(URLinput.value);
});
function sendURL(URL) {
fetch(`http://localhost:4000/download?URL=${URL}`, {
method:'GET'
}).then(res => res.json())
.then(json => console.log(json));
}
Итак, мы можем увидеть, если мы нажмем на кнопку, мы получим ответ от сервера с URL-адресом, который мы отправили. Теперь нам нужно использовать ytdl-core, который обозначает ядро YouTube DownLoader, которое будет загружать для нас видео. Вернемся к index.js. Мы собираемся заставить его загрузить видео, а затем отправить его:
const express = require('express');
const cors = require('cors');
const ytdl = require('ytdl-core');
const app = express();
app.use(cors());
app.listen(4000, () => {
console.log('Server Works !!! At port 4000');
});
app.get('/download', (req,res) => {
var URL = req.query.URL;
res.header('Content-Disposition', 'attachment; filename="video.mp4"');
ytdl(URL, {
format: 'mp4'
}).pipe(res);
});
По сути, он делает следующее: когда пользователь отправляет запрос GET, он принимает запрос, указанный в URL-адресе, а затем добавляет заголовок, в котором говорится, что любое отправленное вложение должно называться video.mp4. затем используйте ytdl для загрузки видео в формате mp4, затем отправьте его (отправьте) пользователю для загрузки.
Когда вы запустите это и протестируете, вы быстро обнаружите, что это не работает. Это потому, что запрос должен быть в URL-адресе, а не в виде выборки. Итак, мы можем в основном заменить выборку перенаправлением на URL-адрес для загрузки видео.
var convertBtn = document.querySelector('.convert-button');
var URLinput = document.querySelector('.URL-input');
convertBtn.addEventListener('click', () => {
console.log(`URL: ${URLinput.value}`);
sendURL(URLinput.value);
});
function sendURL(URL) {
window.location.href = `http://localhost:4000/download?URL=${URL}`;
}
и теперь у вас будет собственный загрузчик YouTube. Вы также можете поиграть с ytdl-core и попробовать добавить форматы .mp3 или .flv. Вы также можете сделать то, что я делал раньше, а именно связать API данных YouTube с вашим веб-приложением. Возможно, поиск видео и его загрузка.
ytdl-core
ytdl-core - это модуль, который можно установить в ваш проект узла. Он позволяет загружать видео с YouTube. Этот замечательный модуль сделал человек по имени fent. В нем много замечательных функций, таких как ytdl.videoInfo, который дает вам различную информацию о видео. Я использовал эту функцию для создания загрузчика YouTube, где вы можете искать видео или вставлять ссылку для загрузки видео. ytdl-core можно использовать для самых разных целей. Позвольте привести пример. Если вы хотите, чтобы на вашем веб-сайте было видео, которое вы загрузили на YouTube, и вы не хотите, чтобы оно блокировалось в местах, где YouTube заблокирован, например в школах. Затем вы можете использовать ytdl-core, чтобы загрузить собственное видео и использовать его. ytdl также позволяет проверять URL-адреса Youtube и проверять идентификаторы видео Youtube.
[Этот проект находится на GitHub]
Если у вас есть вопросы или вы хотите поздороваться, посетите мой сервер Discord
а также
- Спасибо за чтение. -
- Поделитесь своими мыслями в комментариях -
