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.  So just create a new project by providing a certain name or you can select from the created projects. After selecting the project just click on create credentials and create a brand new OAuth Client ID. Just select the option of web application because we are creating a web application which interacts with the Youtube Data API. So in this just provide localhost for the first field and the second field is important it needs to be the same for your project you can have different redirect url. It is basically the url to which Google redirects you whenever the user grants access to your application. Select it cautiously it needs to be same for your project. Click on the create button to generate the client id and client secret. It will be different for you and don’t share this with others. Just copy both and store it somewhere we will be using it later in the application. After that create your project and inside your project create a brand new index.html file which will hold a simple button. For this project we are using XAMMP for local server. After that create a new file main.js which will hold the logic for index.html. In this file we will redirect the user to the permissions page where users can grant access to your application. $(document).ready(function(){ // client id of the project var clientId = "// paste your client id here //"; // redirect_uri of the project var redirect_uri = "// paste your redirect uri here //"; // scope of the project var scope = "https://www.googleapis.com/auth/youtube"; // the url to which the user is redirected to var url = ""; // this is event click listener for the button $("#login").click(function(){ // this is the method which will be invoked it takes four parameters signIn(clientId,redirect_uri,scope,url); }); function signIn(clientId,redirect_uri,scope,url){ // the actual url to which the user is redirected to url = "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri="+redirect_uri +"&prompt=consent&response_type=code&client_id="+clientId+"&scope="+scope +"&access_type=offline"; // this line makes the user redirected to the url window.location = url; } }); The whole source code is full of comments and it is self explanatory we are using jQuery and also just replace the client id , redirect_uri with your values respectively. When you save this and execute this you will getting this output as shown below. As you can see that whenever you execute this you will be redirected to the screen where you want to select your google account from this list of accounts and after that it grants access to your account by allowing this you will be granting access to this application. If you redirect_uri is different from the one you have mentioned in the Google Developers Console. You will getting this error of redirect_uri. After that create a brand new file called as upload.html which will be the actual redirect_uri to which the user will land after allowing access to the application. Just create a new file upload.html and copy paste the code. And also create upload.css and copy paste the code of css.
Youtube PlaylistsYou can see that there is three fields along with the buttons respectively of searching Youtube Playlists by id, username and also you can search the playlist. And when you launch the application it will automatically list all your youtube channel playlists. Just create a new redirect.js file to create the logic whenever the user opens the application it will grab the user’s channel playlist and display them in a list view. First of all we will exchange the authorization code which is generated in the previous step with the access token. Access token are generally the medium from which we will making the requests to the API. $(document).ready(function(){ const urlParams = new URLSearchParams(window.location.search); const code = urlParams.get('code'); const redirect_uri = "// replace with your redirect uri //" // replace with your redirect_uri; const client_secret = "// replace with your client secret //"; // replace with your client secret const scope = "https://www.googleapis.com/auth/youtube"; var client_id = "// replace it with your client id //";// replace it with your client id var playlist; var channelId; var username; var search; var playlistId; var API_KEY = "AIzaSyA0Qw2XhngxnR4YmaetQzJtgoBa7z4RJsY"; $("#myplaylist").hide(); $("#myplaylist").click(function(){ empty(); getMyPlaylists(); }); $("#buttonid").click(function(){ $("#myplaylist").show(); empty(); channelId = $("#channelId").val(); getChannelPlaylist(channelId); }); $("#usernamebutton").click(function(){ $("#myplaylist").show(); empty(); username = $("#usernamefield").val(); getChannelPlaylistByUserName(username); }); $("#searchbutton").click(function(){ $("#myplaylist").show(); empty(); search = $("#search").val(); getChannelPlaylistBySearch(search); }); $.ajax({ type: 'POST', url: "https://www.googleapis.com/oauth2/v4/token", data: {code:code ,redirect_uri:redirect_uri, client_secret:client_secret, client_id:client_id, scope:scope, grant_type:"authorization_code"}, dataType: "json", success: function(resultData) { localStorage.setItem("accessToken",resultData.access_token); localStorage.setItem("refreshToken",resultData.refreshToken); localStorage.setItem("expires_in",resultData.expires_in); //window.history.pushState({}, document.title, "/GitLoginApp/" + "upload.html"); window.history.replaceState({}, document.title, "// replace it with your redirect uri //"); } }); getMyPlaylists(); function stripQueryStringAndHashFromPath(url) { return url.split("?")[0].split("#")[0]; } function getMyPlaylists() { $.ajax({ type: "GET", beforeSend: function(request) { request.setRequestHeader("Authorization", "Bearer" + " " + localStorage.getItem("accessToken")); }, url:"https://www.googleapis.com/youtube/v3/playlists?part=snippet&mine=true&maxResults=25&key="+API_KEY+"&access_token=Bearer"+ " "+localStorage.getItem("accessToken"), success: function (data) { console.log(data); //nextPageToken = data.nextPageToken; //$("#results").append(data.items.snippet.channelTitle data.items.forEach(item => { playlist = ` ${item.snippet.title}${item.snippet.description}Go To Playlist${item.snippet.title}${item.snippet.description}Go To Playlist${item.snippet.title}${item.snippet.description}Go To Playlist${item.snippet.title}${item.snippet.description}Go To PlaylistYou 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. |
