Hướng dẫn javascript youtube downloader - trình tải xuống javascript youtube

Tuyên bố miễn trừ trách nhiệm

Tải xuống video từ YouTube là trái với chính sách YouTube. Các video duy nhất mà bạn được phép tải xuống là của riêng bạn mà bạn có thể làm bằng cách sử dụng YouTube Studio.

Làm cho một trình tải xuống YouTube có thể trông thực sự khó khăn, nhưng nó không thực sự. Tạo trình tải xuống YouTube yêu cầu bạn biết một số HTML, JavaScript và Node.js và bạn nên đủ để tạo trình tải xuống YouTube của riêng bạn.

HTML

Nếu bạn sẽ có trình tải xuống YouTube, bạn cần HTML để tạo các yếu tố mà chúng tôi sẽ sử dụng để tương tác với trang web của chúng tôi. Đầu tiên, tôi đã tạo một tài liệu HTML đơn giản có tiêu đề, đầu vào và nút. Vì vậy, trước tiên tạo một tệp HTML có tên index.html. Đây là mã HTML cho trang web đơn giản của chúng tôi:

    

    
My Own YouTube Downloader !

    
    Convert

Result:

Sau HTML

CSS

Sau đó, chúng tôi sẽ thêm một số kiểu dáng vào trang của chúng tôi bằng CSS. Bạn có thể sử dụng các khung CSS như Bootstrap hoặc Bulma. Vì vậy, trước tiên tôi đã liên kết tệp CSS của mình (style.css) bằng cách thêm thẻ liên kết bên trong đầu:

Sau đó, trong style.css, chúng tôi có thể tùy chỉnh trang web của mình. Vì vậy, đây là mã CSS đơn giản của tôi cho một kiểu dáng thực sự đơn giản:

* {
    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;
}

After kiểu dáng

JavaScript và Node.js

Sau đó, bây giờ chúng tôi cần thiết lập JavaScript và máy chủ Node.js của chúng tôi. Đầu tiên, hãy để tạo ra một tệp JavaScript. Hãy gọi cho nó gọi nó là script.js. Sau đó, chúng tôi sẽ liên kết nó với tệp HTML của chúng tôi bằng cách thêm thẻ script ở phía dưới (rất quan trọng)

Trong tệp out script.js, chúng ta sẽ viết đoạn mã nhỏ đó vào bảng điều khiển giá trị của đầu vào. Chúng tôi đang làm điều đó để kiểm tra xem mọi thứ đang hoạt động.

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
}

Hàm

3 sẽ gửi URL đến máy chủ của chúng tôi. Bây giờ chúng tôi sẽ bắt đầu viết mã cho máy chủ của chúng tôi bằng Node.js. Đầu tiên, chúng tôi sẽ tạo một thư mục có tên là máy chủ sau đó tạo một tệp có tên index.js bên trong thư mục máy chủ. Điều này sẽ có mã cho máy chủ chạy. Sau khi tạo tệp, chúng ta cần chạy lệnh này trong dòng lệnh hoặc thiết bị đầu cuối trong thư mục máy chủ:

npm init

Bạn sẽ được hỏi một loạt các câu hỏi về dự án. Tất cả các phản hồi mặc định sẽ ổn. Sau đó, chúng tôi sẽ cài đặt một số gói mà chúng tôi sẽ sử dụng.

Nhập lệnh bên dưới để cài đặt các gói cần thiết là Express, YTDL-Core và CORS

npm install express cors ytdl-core

Để thiết lập máy chủ của chúng tôi, chúng tôi cần nhập một số mã bên trong tệp index.js. Chúng tôi cần yêu cầu các gói và thiết lập máy chủ:

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');
});

Đây là một thiết lập nhỏ. Chúng tôi yêu cầu các gói và làm cho máy chủ nghe trên cổng 4000.

Nếu chúng ta nhập dòng lệnh/thiết bị đầu cuối:

node index.js

Chúng ta sẽ thấy

4. Nếu bạn không nhận được rằng bạn đã làm điều gì đó sai.

Sau đó, chúng tôi cần làm cho máy chủ lắng nghe yêu cầu nhận trên đường dẫn

5. Vì vậy, chúng tôi đã thêm điều này:

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});
})

Vì vậy, khi người dùng gửi yêu cầu GET đến máy chủ tại đường dẫn

5 thì máy chủ sẽ trả lời với truy vấn được chèn vào yêu cầu. Hãy để Lừa quay trở lại mặt trước và cố gắng làm cho JavaScript gửi yêu cầu nhận đến máy chủ. Ngoài ra, tôi đã sử dụng phần mềm trung gian

7 để máy chủ của tôi có thể nhận được yêu cầu. Tôi đã sử dụng

8 để gửi yêu cầu từ JavaScript:

0

Vì vậy, chúng tôi có thể xem nếu chúng tôi nhấp vào nút, chúng tôi nhận được phản hồi lại từ máy chủ với URL mà chúng tôi gửi. Bây giờ chúng tôi cần sử dụng YTDL-Core, viết tắt của YouTube Downloader Core sẽ tải xuống video cho chúng tôi. Hãy để Lừa quay lại Index.js. Chúng tôi sẽ làm cho nó tải xuống video sau đó gửi nó:

1

Về cơ bản, nó đang làm gì là khi người dùng gửi yêu cầu GET, nó thực hiện truy vấn được đưa ra trong URL, sau đó thêm một tiêu đề cho biết bất kỳ tệp đính kèm nào được gửi cần được gọi là video.mp4. Sau đó sử dụng YTDL để tải xuống video với định dạng MP4 sau đó gửi nó (gửi) cho người dùng để tải xuống.

Khi bạn chạy cái này và kiểm tra nó, bạn sẽ nhanh chóng phát hiện ra rằng nó không hoạt động. Đó là bởi vì yêu cầu cần phải nằm trong URL chứ không phải là một lần tìm nạp. Vì vậy, về cơ bản, chúng tôi có thể thay thế việc tìm nạp bằng chuyển hướng đến URL để tải xuống video.

2

Và bây giờ bạn sẽ có trình tải xuống YouTube của riêng bạn. Bạn cũng có thể chơi xung quanh với lõi ytdl và cố gắng thêm các định dạng .mp3 hoặc .flv. Bạn cũng có thể làm những gì tôi đã làm trước đó là liên kết API dữ liệu YouTube với ứng dụng web của bạn. Có thể tìm kiếm một video sau đó tải xuống nó.

ytdl-core

YTDL-Core là một mô-đun có thể được cài đặt trong dự án nút của bạn. Nó cho phép bạn tải xuống video YouTube. Mô -đun tuyệt vời này được thực hiện bởi một người tên là Fent. Nó có rất nhiều tính năng tuyệt vời như

9 cung cấp cho bạn thông tin khác nhau về video. Tôi đã sử dụng tính năng này để tạo trình tải xuống YouTube nơi bạn có thể tìm kiếm video hoặc đưa liên kết vào để tải xuống video. YTDL-Core có thể được sử dụng cho tất cả các mục đích khác nhau. Tôi sẽ cho bạn một ví dụ. Nếu bạn muốn trang web của bạn có video mà bạn đã tải lên YouTube và bạn cũng không muốn nó bị chặn ở những nơi YouTube bị chặn như trường học. Sau đó, bạn có thể sử dụng YTDL-Core để tải xuống video của riêng bạn và sử dụng nó. YTDL cũng cho phép bạn xác nhận URL YouTube và xác nhận ID video YouTube

[Nếu bạn muốn hỗ trợ tôi]

[Dự án này tệp trên GitHub]

[Thông tin thêm về YDTL-Core]

Nếu bạn có bất kỳ câu hỏi hoặc muốn nói xin chào, hãy truy cập máy chủ Discord của tôi

[Máy chủ Discord]

và

- Cảm ơn bạn đã đọc.-

- Hãy cho tôi biết suy nghĩ của bạn trong các bình luận -