Lấy video kênh Youtube mới nhất bằng jQuery và Youtube API V3
Trong bài này mình sẽ hướng dẫn bạn cách sử dụng Youtube API V3 và jQuery để lấy danh sách video mới nhất được đăng tải trên kênh của các bạn. Chúc năng này rất hữu ích nếu bạn có website và có kênh riêng cho website đó.
Bài viết này được đăng tại phpbbvietnam.com, không được copy dưới mọi hình thức.
Ngay phpbbvietnam.com cũng có chức năng này, bạn thử vào và sẽ thấy có một Popup nằm phía bên trái khi click vào sẽ hiển thị danh sách video mới nhất đăng trên kênh Youtube.
Để làm được điều này chúng ta phải thực hiện các bước như sau:
- Bước 1: Đăng ký Google API để lấy API Key.
- Bước 2: Lấy video Upload ID.
- Bước 3: Dựa vào video Upload ID lấy danh sách video.
Để làm được chức năng này ban phải biết ajax, đặc biệt là phương thức GET jQuery Ajax.
Bài viết này được đăng tại [phpbbvietnam.com]
1. Các bước lấy Video mới nhất từ Youtube
Đăng ký Google API để lấy API Key:
Mình đã có một bài hướng dẫn rồi đó là bài đăng ký google API, bạn tới bài đó đọc theo hướng dẫn ở phần một (đăng ký theo giao diện mới) nhé.
Lấy Video Upload ID:
Bạn sử dụng jQuery Ajax request đến URL https://www.googleapis.com/youtube/v3/channels bằng phương thức GET và kèm các tham số như sau:
- part : contentDetails
- id : id kênh của bạn
- key : API key mà bạn đã đăng ký
Ví dụ:
// Get Youtube Video Upload ID
$.get("https://www.googleapis.com/youtube/v3/channels", {
part : "contentDetails",
id : "youtube_id",
key : "api_key"
},
function(data){
// Kết quả data là một Object như hình phía dưới
}
);
Kết quả nó trả về là một Object như sau:
Lúc này ta phải lặp qua item để lấy trường upload mà mình đã bôi xanh trong hình.
// Get Youtube Video Upload ID
$.get("https://www.googleapis.com/youtube/v3/channels", {
part : "contentDetails",
id : "chanel_id",
key : "api_key"
},
function(data){
$.each(data.items, function(i, item){
var id = item.contentDetails.relatedPlaylists.uploads;
// Xử lý tiếp - lấy danh sách video
});
}
);
Dựa vào video Upload ID lấy danh sách video:
Trong vòng lặp each trên ta sẽ viết code Ajax request đến https://www.googleapis.com/youtube/v3/playlistItems bằng phương thức GET với các tham số:
- part : snippet
- maxResults : số video muốn lấy
- playlistId : id
- key : api_key
Và lúc này kết quả nó sẽ trả về dạng như sau:
Lúc này ta lặp qua items và dữ liệu cần lấy sẽ nằm trong items[i].snippet.
// Get Youtube Video Upload ID
$.get("https://www.googleapis.com/youtube/v3/channels", {
part : "contentDetails",
id : "chanel_id",
key : "api_key"
},
function(data)
{
$.each(data.items, function(i, item)
{
// Upload ID
var id = item.contentDetails.relatedPlaylists.uploads;
$.get("https://www.googleapis.com/youtube/v3/playlistItems", {
part : "snippet",
maxResults : "50",
playlistId : id,
key : "api_key"
},
function(result){
var output="";
$.each(result.items, function(i, result_item){
output += '<div>';
var title = result_item.snippet.title;
var href = result_item.snippet.resourceId.videoId;
var img = result_item.snippet.thumbnails.default.url;
output += '<img src="'+img+'" />';
output += '<div><a href="https://www.youtube.com/watch?v='+href+'" title="'+title+'">'+title+'</a></div>';
output +='</div>';
});
// Gán danh sách video vào body
$('body').html(output);
}
);
});
}
);
Như vậy là bạn đã thành công trong việc lấy video mới nhất từ kênh Youtube của bạn rồi đấy.
2. Ví dụ lấy video kênh của phpbbvietnam.com
Kênh phpbbvietnam.com có ID là UCg9QhTft6SFstWk67JlJiEA và API Key là AIzaSyBdJxvaeQKFaQoqcc36mJmqTv_J_BMCMFE.
Lúc này code sẽ như sau:
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title>Video YOUTUBE Latest</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://phpbbvietnam.com/public/javascript/jquery.min.js" ></script>
<script language="javascript">
$(document).ready(function()
{
var chanel_id = 'UCg9QhTft6SFstWk67JlJiEA';
var api_key = 'AIzaSyBdJxvaeQKFaQoqcc36mJmqTv_J_BMCMFE';
// Get Youtube Video Upload ID
$.get("https://www.googleapis.com/youtube/v3/channels", {
part : "contentDetails",
id : chanel_id,
key : api_key
},
function(data)
{
$.each(data.items, function(i, item)
{
// Upload ID
var id = item.contentDetails.relatedPlaylists.uploads;
$.get("https://www.googleapis.com/youtube/v3/playlistItems", {
part : "snippet",
maxResults : "50",
playlistId : id,
key : api_key
},
function(result){
var output="";
$.each(result.items, function(i, result_item){
output += '<div>';
var title = result_item.snippet.title;
var href = result_item.snippet.resourceId.videoId;
var img = result_item.snippet.thumbnails.default.url;
output += '<img src="'+img+'" />';
output += '<div><a href="https://www.youtube.com/watch?v='+href+'" title="'+title+'">'+title+'</a></div>';
output +='</div>';
});
// Gán danh sách video vào body
$('body').html(output);
}
);
});
}
);
});
</script>
</head>
<body>
</body>
</html>
3. Lời kết
Việc lấy danh sách video này nếu không tìm hiểu kỹ sẽ rất khó lấy bởi nó phải thông qua hai giai đoạn, vì vậy bạn hãy xem kỹ video để viết theo sẽ dễ dàng hơn.
Bài viết này, The Learn PHP Tutorial Đã gửi đến bạn đọc kiến thức về “Lấy video kênh Youtube mới nhất bằng jQuery và Youtube API V3❤️️”. Admin hy vọng qua phần nội dung trong bài”Lấy video kênh Youtube mới nhất bằng jQuery và Youtube API V3″ có thể giúp bạn đọc có thêm kiến thức về “Lấy video kênh Youtube mới nhất bằng jQuery và Youtube API V3 trong quá trình tự học PHP của mình .
Bài viết “Lấy video kênh Youtube mới nhất bằng jQuery và Youtube API V3” posted by on 2022-08-11 19:33:19. Cảm ơn bạn đọc đã xem bài viết tại Phpbbvietnam.com Và đừng quên chia sẻ bài viết này để nhiều người khác cũng có thể xem tài liệu học php miễn phí này nhé.
