Hướng Dẫn Lấy Ảnh Thumbnail Video YouTube Bằng Vanilla JS
1. Giới thiệu
Trong thời đại công nghệ hiện nay, video trên YouTube đã trở thành phương tiện truyền thông phổ biến. Một trong những yếu tố quan trọng thu hút người dùng xem video chính là ảnh thumbnail hấp dẫn. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách lấy ảnh thumbnail của một video YouTube bằng vanilla JavaScript thông qua việc nhập link video vào ô input.
2. Yêu cầu bài toán
Chúng ta sẽ xây dựng một ứng dụng đơn giản, cho phép người dùng dán link video YouTube vào ô input và nhấn nút "View" để hiển thị ảnh thumbnail của video đó. Đây là một bài tập lý thú giúp bạn tăng cường kỹ năng JavaScript của mình và làm quen với các thao tác cơ bản trong lập trình web.
3. Giao diện HTML và CSS
Chúng ta sẽ tạo giao diện đơn giản với các thành phần sau:
- Một ô input để người dùng nhập link video YouTube.
- Một nút bấm để gửi yêu cầu lấy thumbnail.
- Một khu vực để hiển thị ảnh thumbnail đã lấy được.
Dưới đây là đoạn mã HTML kết hợp với Bootstrap để tạo giao diện:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lấy Ảnh Thumbnail Video YouTube</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<div class="text-center">
<div class="row justify-content-center">
<div class="col-6">
<h1 class="">Lấy Ảnh Thumbnail Video YouTube</h1>
<form class="form" onsubmit="getYouTubeThumbnail(event)">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="YouTube Video URL" id="videoUrl" required>
<button class="btn btn-primary" type="submit">Xem</button>
</div>
</form>
</div>
</div>
<img class="thumbnail d-none" id="thumbnail" src="#" alt="Thumbnail video">
</div>
</div>
<script>
// JavaScript ở đây
</script>
</body>
</html>4. Hướng giải quyết chính
Để hoàn thành bài toán này, chúng ta sẽ thực hiện theo các bước sau:
- Lấy link video YouTube nhập trong ô input.
- Lắng nghe sự kiện click từ nút "View".
- Sử dụng regular expressions (regex) để tách ID video từ link YouTube.
- Tạo URL để lấy thumbnail từ ID video.
- Hiển thị thumbnail trên giao diện.
5. Lập trình JavaScript
Dưới đây là đoạn mã JavaScript hoàn chỉnh giúp chúng ta thực hiện các bước trên:
javascript
<script>
const youtubeThumbnail = document.getElementById("thumbnail");
function extractVideoId(url) {
const regex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/(?:watch\?v=|shorts\/)([\w-]{11})/;
const match = url.match(regex);
return match ? match[1] : null;
}
function getYouTubeThumbnail(event) {
event.preventDefault();
const videoUrl = document.getElementById("videoUrl").value;
const videoId = extractVideoId(videoUrl);
if (!videoId) {
alert("Đường dẫn video YouTube không hợp lệ");
return;
}
const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
youtubeThumbnail.src = thumbnailUrl;
youtubeThumbnail.classList.remove('d-none');
}
</script>6. Kết quả
Sau khi hoàn thành mã nguồn, bạn sẽ có thể nhập đường dẫn video YouTube và nhìn thấy ảnh thumbnail xuất hiện ngay lập tức. Hi vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cách làm việc với JavaScript và tạo ra giao diện web đơn giản. Hẹn gặp lại ở những bài viết tiếp theo!
- Demo
- Mã nguồn
- Chuỗi dự án lập trình JavaScript cơ bản
- Liên hệ: trungnt256
source: viblo
