Get playlist youtube javascript
Welcome folks I am back with another blog post. In this post we will be making a Complete Youtube Playlist Search Application from Scratch in Javascript using the Youtube Data API V3.For this application we first of all need to create a project in Google Developers Consoleand get your client id and client secret. This process is illustrated in the next steps in a detailed fashion.
Go To Playlist
`;
$["#results1"].append[playlist];
}];
},
error: function [error] {
console.log[error];
},
}];
}
function getChannelPlaylist[channelId]
{
$.ajax[{
type: "GET",
beforeSend: function[request] {
request.setRequestHeader["Authorization", "Bearer" + " " + localStorage.getItem["accessToken"]];
},
url: "//www.googleapis.com/youtube/v3/playlists?part=snippet&maxResults=25&channelId="+channelId+"&access_token=Bearer"+ " "+localStorage.getItem["accessToken"],
success: function [data] {
console.log[data];
//$["#results"].append[data.items.snippet.channelTitle];
data.items.forEach[item => {
playlist = `
${item.snippet.title}
${item.snippet.description}
Go To Playlist
`;
$["#results2"].append[playlist];
}];
},
error: function [error] {
console.log[error];
},
}];
}
function getChannelPlaylistByUserName[username]
{
$.ajax[{
type: "GET",
beforeSend: function[request] {
request.setRequestHeader["Authorization", "Bearer" + " " + localStorage.getItem["accessToken"]];
},
url: "//www.googleapis.com/youtube/v3/channels?part=snippet,contentDetails"+"&maxResults=25&forUsername="+username+"&access_token=Bearer"+ " "+localStorage.getItem["accessToken"],
success: function [data] {
console.log[data];
channelId = data.items[0].id;
getChannelPlaylistIdUserName[channelId];
//$["#results"].append[data.items.snippet.channelTitle];
},
error: function [error] {
console.log[error];
},
}];
}
function getChannelPlaylistBySearch[search]
{
$.ajax[{
type: "GET",
beforeSend: function[request] {
request.setRequestHeader["Authorization", "Bearer" + " " + localStorage.getItem["accessToken"]];
},
url: "//www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q="+search+"&type=playlist",
success: function [data] {
console.log[data];
data.items.forEach[item => {
playlistId = item.id.playlistId;
playlist = `
${item.snippet.title}
${item.snippet.description}
Go To Playlist
`;
$["#results4"].append[playlist];
}];
//$["#results"].append[data.items.snippet.channelTitle];
},
error: function [error] {
console.log[error];
},
}];
}
function getChannelPlaylistIdUserName[channelId]
{
$.ajax[{
type: "GET",
beforeSend: function[request] {
request.setRequestHeader["Authorization", "Bearer" + " " + localStorage.getItem["accessToken"]];
},
url: "//www.googleapis.com/youtube/v3/playlists?part=snippet&maxResults=25&channelId="+channelId+"&access_token=Bearer"+ " "+localStorage.getItem["accessToken"],
success: function [data] {
console.log[data];
//$["#results"].append[data.items.snippet.channelTitle];
data.items.forEach[item => {
playlist = `
${item.snippet.title}
${item.snippet.description}
Go To Playlist
`;
$["#results3"].append[playlist];
}];
},
error: function [error] {
console.log[error];
},
}];
}
function empty[]
{
$["#results1"].empty[];
$["#results2"].empty[];
$["#results3"].empty[];
$["#results4"].empty[];
}
}]You can see that when you launch the app your playlist will automatically be shown to you and also you can see the json response which comes from the API. Apart from this you also have the option to search playlist by id, username and also you have the option to to search playlist by keyword. You can see the figure of the application as shown below.
First of all in order to fetch Youtube Playlist by id you have to copy paste the channel id as shown below and then paste in the application.
You can see that we have copy pasted the channel id in the search and then click the submit button. You will see the playlist of that particular channel.
You can see that the playlist are shown in the list view. You also have the option of going to the playlist from the application as shown below.
We can also search the playlist by youtube channel username. We can find the youtube channel username as shown below and copy paste in the application.
We can also search the Youtube Playlist by entering any keyword as shown below.
Congratulations we are done making a Complete Youtube Playlist Search Application from Scratch in Javascript using the Youtube Data API V3 from scratch. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.
Video liên quan