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 Show
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 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
Như bạn có thể thấy trong cả hai URL, có cùng một ID video After I got the video ID, https://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('https://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 Làm cách nào để lấy hình ảnh thu nhỏ từ video YouTube php?Để lấy hình thu nhỏ từ video Youtube chỉ cần ba bước. - . Tạo một tệp HTML và xác định đánh dấu. Chúng tôi tạo một tệp HTML và lưu nó với tên thumbnail. html. . Tạo tệp PHP để lấy hình thu nhỏ từ video youtube. Chúng tôi tạo một tệp PHP và lưu nó với tên get_thumbnail. php. . Tạo một tệp CSS và xác định kiểu dáng Làm cách nào để lấy hình ảnh thu nhỏ từ mã nhúng YouTube trong PHP?Tạo nguồn hình thu nhỏ từ video bằng mã PHP
. Sau đó, nó tạo URL nguồn hình thu nhỏ bằng cách sử dụng id duy nhất của video. URL nguồn này được sử dụng để hiển thị bản xem trước của video bằng hình ảnh thu nhỏ. It extracts the unique id from the video using PHP explode(). Then it creates the thumbnail source URL by using the unique id of the video. This source URL is used to show the preview of the video using thumbnail image.
Làm cách nào để hiển thị hình thu nhỏ của video trong PHP?php yêu cầu 'nhà cung cấp/tự động tải. php'; . mp4'; . png'; . tạo ra(); . fromSeconds($sec));
Làm cách nào để tạo hình ảnh thu nhỏ trong PHP?Tải hình ảnh (sử dụng đúng chức năng PHP) Tạo hình thu nhỏ bằng cách sao chép hình ảnh và thay đổi kích thước hình ảnh. Lưu hình thu nhỏ vào đĩa (sử dụng đúng chức năng PHP) . imagecreatefromjpeg & imagejpeg hình ảnh tạo từ png & imagepng hình ảnh tạo từ gif & hình ảnh gif |
