Xin chào các bạn, hôm nay trong blog này, bạn sẽ học cách Lưu hoặc Tải xuống Hình thu nhỏ của Video YouTube hoặc các Tệp Hình ảnh khác bằng PHP cURL & JavaScript. Trong blog trước, tôi đã chia sẻ một blog về cách tạo Trang web rút ngắn URL bằng PHP và bây giờ là lúc tạo một dự án để tải xuống hình thu nhỏ video YouTube bằng JavaScript & PHP
Trong dự án này [Tải xuống hình thu nhỏ video YouTube], bạn có thể thấy trong phần xem trước hình ảnh, một hộp hoặc biểu mẫu màu trắng có trường nhập, khu vực xem trước hình ảnh và nút tải xuống. Nút tải xuống bị tắt cho đến khi bạn dán URL video YouTube hợp lệ hoặc URL tệp hình ảnh khác
Khi bạn dán URL video YouTube ngay lập tức sẽ xuất hiện bản xem trước hình thu nhỏ của video đó và bạn có thể tải xuống. Trình tải xuống hình thu nhỏ này chấp nhận tất cả các loại URL video YouTube có nghĩa là URL dài hoặc ngắn của video. Và nó cũng chấp nhận bất kỳ tệp hình ảnh nào khác như. jpg,. jpeg,. png,. gif và. trang web
Video hướng dẫn về Trình tải xuống hình thu nhỏ của YouTube
Trong video, bạn đã thấy giao diện của trình tải xuống này và cách bạn có thể tải xuống hình thu nhỏ hoặc các tệp hình ảnh khác bằng cách dán liên kết hoặc URL của chúng. Trong video, bạn cũng đã thấy cách tôi tạo trình tải xuống hình thu nhỏ này bằng HTML CSS JavaScript & PHP.
Như bạn đã biết, Để tạo dự án này, tôi chỉ sử dụng 6-8 dòng mã cURL PHP và chúng chỉ được sử dụng để tải xuống một hình ảnh và tất cả những thứ khác được thực hiện bằng JavaScript như hình thu nhỏ xem trước. Vì vậy, nếu bạn không biết PHP thì bạn cũng có thể xem video này để học JavaScript. Tôi đã cố gắng giải thích từng dòng JavaScript & PHP bằng các nhận xét và tôi hy vọng bạn đã hiểu mã
Hãy hiểu cách tôi lấy hình thu nhỏ từ URL và tải nó xuống nhưng trước đó, bạn phải biết URL video YouTube trông như thế nào
- URL dài của video – https. //www. youtube. com/watch?v=FucPPCPDd2Y
- URL ngắn của cùng một video – https. //youtube. be/FucPPCPDd2Y
Như bạn có thể thấy trong cả hai URL, có cùng một ID video FucPPCPDd2Y gồm 11 độ dài và ID này là duy nhất cho mỗi video và chúng tôi chỉ cần ID này để lấy hình thu nhỏ của video này. Trước tiên, sử dụng JavaScript để người dùng nhập URL video và tách nó khỏi v= nếu URL dài hoặc tách nó khỏi /be nếu URL ngắn để chỉ lấy ID video
After I got the video ID, //img.youtube.com/vi/VID_ID/maxresdefault.jpg is the thumbnail URL of the YouTube video. If you open this URL by replacing VID_ID with some random video ID then you’ll get a thumbnail of that video. I just replaced this VID_ID with the user entered video ID and inserted this full URL inside Thứ hai, tạo một tệp CSS với tên kiểu. css và dán các mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng css
/* Import Google font - Poppins & Noto */ @import url('//fonts.googleapis.com/css2?family=Noto+Sans:[email protected];500;600;700&family=Poppins:[email protected];500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #7D2AE8; } ::selection{ color: #fff; background: #7D2AE8; } form{ width: 450px; background: #fff; padding: 30px ; border-radius: 5px; box-shadow: 10px 10px 13px rgba(0,0,0,0.1); } form header{ text-align: center; font-size: 28px; font-weight: 500; margin-top: 10px; color: #7D2AE8; } form .url-input{ margin: 30px 0; } .url-input .title{ font-size: 18px; color: #373737; } .url-input .field{ margin-top: 5px; height: 50px; width: 100%; position: relative; } .url-input .field input{ height: 100%; width: 100%; border: none; outline: none; padding: 0 15px; font-size: 15px; background: #F1F1F7; border-bottom: 2px solid #ccc; font-family: 'Noto Sans', sans-serif; } .url-input .field input::placeholder{ color: #b3b3b3; } .url-input .field .bottom-line{ position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #7D2AE8; transform: scale(0); transition: transform 0.3s ease; } .url-input .field input:focus ~ .bottom-line, .url-input .field input:valid ~ .bottom-line{ transform: scale(1); } form .preview-area{ border-radius: 5px; height: 220px; display: flex; overflow: hidden; align-items: center; justify-content: center; flex-direction: column; border: 2px dashed #8e46ec; } .preview-area.active{ border: none; } .preview-area .thumbnail{ width: 100%; display: none; border-radius: 5px; } .preview-area.active .thumbnail{ display: block; } .preview-area.active .icon, .preview-area.active span{ display: none; } .preview-area .icon{ color: #8e46ec; font-size: 80px; } .preview-area span{ color: #8e46ec; margin-top: 25px; } form .download-btn{ color: #fff; height: 53px; width: 100%; outline: none; border: none; font-size: 17px; font-weight: 500; cursor: pointer; margin: 30px 0 20px 0; border-radius: 5px; background: #7D2AE8; pointer-events: none; transition: background 0.3s ease; } .download-btn:hover{ background: #6616d0; } @media screen and (max-width: 460px){ body{ padding: 0 20px; } form header{ font-size: 24px; } .url-input .field, form .download-btn{ height: 45px; } form .download-btn{ font-size: 15px; } form .preview-area{ height: 130px; } .preview-area .icon{ font-size: 50px; } .preview-area span{ margin-top: 10px; font-size: 12px; } }Vậy là xong, bây giờ bạn đã tạo thành công một dự án Tải xuống hình thu nhỏ video YouTube bằng HTML CSS JavaScript & PHP. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ lỗi/sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một. zip sẽ được tải xuống sau đó bạn giải nén nó
Sau khi giải nén, hãy di chuyển thư mục này vào bên trong htdocs của thư mục cài đặt XAMPP của bạn và khởi động máy chủ apache từ bảng điều khiển xampp, sau đó mở url này – localhost/thumbnail hoặc localhost/thumbnail/index. php trong trình duyệt của bạn