How to get the views and description of the video from the YouTube through JavaScript and JSON

Question

0.00/5 (No votes)

See more:

How to get the views and description of the video from the YouTube through JavaScript and JSON

XML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>



<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function LoadVids(startindex){
if (typeof startindex === "undefined" || startindex===null) startindex = 1;
var maxresults = 10;

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PL3B8939169E1256C0?orderby=published&v=2&alt=json&&start-index=' + startindex + '&max-results=' + maxresults;
var videoURL= 'videos.html?name=';
$.getJSON(playListURL, function(data) {
    var list_data="";
    $.each(data.feed.entry, function(i, item) {
        var feedTitle = item.title.$t;
        var feedURL = item.link[1].href;
        var fragments = feedURL.split("/");
        var videoID = fragments[fragments.length - 2];
        var vid = item.media$group.yt$videoid.$t;
        var url = videoURL + videoID;
        var vidtitle = item.title.$t;
        var vidviews = item.views.$t;
        var content = item.description.$t;
        var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
        list_data += '<div><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"</a>' + vidtitle +"<br/>"+ vidviews +"<br/>"+ content + '</div>';
    });
    $(list_data).appendTo(".cont");
});
}


//
$( document ).ready(function() {
 LoadVids(1); // call on load more click
});
});//


</script>
</head>
<body>
<ul  class="cont">
</ul>

</body>
</html>

Posted 24-Dec-14 22:04pm

Krishna Chaitanya Kollu

Add a Solution

Comments

Kornfeld Eliyahu Peter 25-Dec-14 4:44am

You have two problems...
1. You are using old (v2)...
2. The data structure you are using does not fit the one of v2 either...

Krishna Chaitanya Kollu 25-Dec-14 4:56am

Sir Will you Suggest some code to Resolve this Issue Please

Kornfeld Eliyahu Peter 25-Dec-14 5:05am

You URL should look like this:
https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=10&playlistId=PL3B8939169E1256C0&key={YOUR_API_KEY}
Read more here: https://developers.google.com/youtube/v3/docs/playlistItems/list

Krishna Chaitanya Kollu 25-Dec-14 5:32am

Sir That Code is Not Working
$(window).load(function(){
function LoadVids(startindex){
if (typeof startindex === "undefined" || startindex===null) startindex = 1;
var maxresults = 10;

var playListURL = 'https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=10&playlistId=PL3B8939169E1256C0&key={AIzaSyCnMsLoh3V5bzCJ5CYF3e_9X7-Ati9ecv0}' + startindex + '&max-results=' + maxresults;
var videoURL= 'videos.html?name=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var vid = item.media$group.yt$videoid.$t;
var url = videoURL + videoID;
var vidtitle = item.title.$t;
var vidviews = item.views.$t;
var content = item.description.$t;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
list_data += '<div><img alt="'+ feedTitle+'" src="'+ thumb +'"' + vidtitle +"<br/>"+ vidviews +"<br/>"+ content + '</div>';
});
$(list_data).appendTo(".cont");
});
}

//
$( document ).ready(function() {
LoadVids(1); // call on load more click
});
});//

Kornfeld Eliyahu Peter 25-Dec-14 5:49am

https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=10&playlistId=PL3B8939169E1256C0&key=AIzaSyCnMsLoh3V5bzCJ5CYF3e_9X7-Ati9ecv0
Key Should not been enclosed in {}, also that part of startindex is wrong, and max-results should be maxResults and already exists!!!

Krishna Chaitanya Kollu 25-Dec-14 6:01am

Even its Not Working Sir :( Even Making Corrections Sir Please Give me a corrected Script Sir

Krishna Chaitanya Kollu 25-Dec-14 6:57am

Thanks Kornfeld

2 solutions

Solution 2

Kornfeld Sir Thanks For Your Support I'll Never Forget Your Support
After Reading So Many Documents I Got My Solution in V2 Only

XML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>



<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function LoadVids(startindex){
if (typeof startindex === "undefined" || startindex===null) startindex = 1;
var maxresults = 10;

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PL3B8939169E1256C0?orderby=published&v=2&alt=json&&start-index=' + startindex + '&max-results=' + maxresults;
var videoURL= 'videos.html?name=';
$.getJSON(playListURL, function(data) {
    var list_data="";
    $.each(data.feed.entry, function(i, item) {
        var feedTitle = item.title.$t;
        var feedURL = item.link[1].href;
        var fragments = feedURL.split("/");
        var videoID = fragments[fragments.length - 2];
        var vid = item.media$group.yt$videoid.$t;
        var url = videoURL + videoID;
        var vidtitle = item.title.$t;
        var vidviews = item.yt$statistics.viewCount;
        var content = item.media$group.media$description.$t;
        var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
        list_data += '<a href="'+ url +'" title="'+ feedTitle +'"><div><img alt="'+ feedTitle+'" src="'+ thumb +'" />' + vidtitle +"<br/>"+ vidviews +"<br/>"+ content +'</div>''</a>';
    });
    $(list_data).appendTo(".cont");
});
}


//
$( document ).ready(function() {
 LoadVids(1); // call on load more click
});
});//


</script>
</head>
<body>
<ul  class="cont">
</ul>

</body>
</html>

Posted 25-Dec-14 0:59am

Krishna Chaitanya Kollu

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Accepted Answer · 2014-12-25T00:49:00

JavaScript

var rootURI = 'https://www.googleapis.com/youtube/v3/playlistItems?playlistId=PL3B8939169E1256C0&key=AIzaSyCnMsLoh3V5bzCJ5CYF3e_9X7-Ati9ecv0&part=contentDetails&maxResults=10';
var pageToken = '&pageToken=';


$(document).ready(function () {
    LoadVids();
});

function LoadVids(pageTokenID) {
    var playListURL = rootURI + ((pageTokenID) ? pageToken + pageTokenID : '');

    $.getJSON(playListURL, function (data) {
        var list_data = "";

        $.each(data.items, function (i, item) {
            // do what you want to do
        });
    });
}

The actual data has a header that contains the page info for next page and the total number of items (for paging)...