How to get a youtube playlist using javascript API and json

Question

This is part of my youtube project. I try to extract video information from JSON format but I have problem in this line:

var videoId = data.feed.entry[i].link[1].href;

When I do this in single line not in cikle evrithing is ok but in cikle for or while I have error.

//get youtube ID

function extract(url){
    pos1=url.indexOf("videos/");
    pos2=url.substr(42,11);
    return pos2;
}

//My playlist LINK
var url2="http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json";
function playlistinfo(url1) {
    $.ajax({
        url: url1,
        dataType: "jsonp",
        success: function (data) { parseresults(data); }
    });
}

//whit this get playlist data
function parseresults(data) {

    //return playlist clip number
    var klipove= data.feed.openSearch$totalResults.$t;
    //put clips in  <li>

    for(i=0;i<=klipove-1;i++) {
        var videoId = data.feed.entry[i].link[1].href;
        //get video id  ID
        var id= extract(videoId);
        thumb = data.feed.entry[i].media$group.media$thumbnail[0].url;
        $('<li><img src="'+thumb+'" alt="'+id+'" class="thumb"/></li>').appendTo('.cont');
    }
}

I really have no idea what you are saying. You should try and clean up your post. — james, Jul 03 '11 at 00:22
Indeed, please reformat your code and double check what should be formatted as code / where line breaks should be. — kwah, Jul 03 '11 at 00:33
@Lacy see my demo link http://deathdreamer.atwebpages.com/proba19.php All javascript code is in this page.Open whit firebug and see what you need :) uts very old and messy code but is good for starting :) — plamen, Jan 31 '12 at 01:20

score 39 · Accepted Answer · edited May 23 '17 at 11:52

39

IMHO, you code can be much shortened if you use $.getJSON, $.each
Try this.

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.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 url = videoURL + videoID;
        var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
        if (videoID !='videos') {
list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"</a></li>';
}
    });
    $(list_data).appendTo(".cont");
});

Demo: Fiddle for the playlist you have provided

P.S: Keep in mind that thumbnail for a youtube video could be found at

http://img.youtube.com/vi/{video-id}/default.jpg

( More Info here )

edited May 23 '17 at 11:52

Community

1
1

answered Jul 03 '11 at 03:02

naveen

53,448
46
161
251

Tnx :) I try 1 weeek to fix this line :) you help me very much :) – plamen Jul 03 '11 at 08:37
tnx ... for first time i write here and i didn't know :) tnx alot :) – plamen Jul 03 '11 at 09:54
i have litle problem ...this function not work in internet explorer and opera... onli MOZILLA .... can you help me ? – plamen Jul 06 '11 at 20:33
i will check and let you know:) – naveen Jul 06 '11 at 20:34
You don't need to use that string manipulation stuff if you don't want to. I added a simplified solution below. Also, wanted to say to previous commentaries. The question is perfectly clear and it's very unproductive to snap back at them to fix their questions. They provided code and clear title. – chrisallick Jun 18 '14 at 19:48

score 0 · Answer 2 · answered Sep 27 '12 at 05:39

I found that these lines:

var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];

are expecting item.link[1].href to be in this format:

http://gdata.youtube.com/feeds/api/videos/NAs5it-xjnQ/responses?v=2

However, it does not necessarily work as sometimes item.link[1] gives an URL like

http://www.youtube.com/watch?v=Vcp7xz6dfWE&feature=youtube_gdata

Fragments[fragments.length - 2] will end up being "www.youtube.com" instead of the video ID.

I modified it to retrieve the link from item.content.src which always has a fixed format in the URL e.g.

http://www.youtube.com/v/NAs5it-xjnQ?version=3&f=playlists&app=youtube_gdata

So the final code snippet is something like:

var tmp = item.content.src.split("/").reverse()[0];
var videoID = tmp.substring(0, tmp.indexOf("?"));

which so far has not failed me yet.

Hope this helps those who are stuck or is having problems retrieving the video ID.

Regards
CK

score 0 · Answer 3 · answered Jun 18 '14 at 19:47

0

Simplified the solution and got rid of the string manipulation stuff.

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/B2A4E1367126848D?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';

var vids = new Array();

$.getJSON(playListURL, function(data) {
    $.each(data.feed.entry, function(i, item) {
        vids.push( item["media$group"]["yt$videoid"]["$t"] );
    });

    console.log( vids );
});

answered Jun 18 '14 at 19:47

chrisallick

1,330
17
18

Hi! I'm trying to get this example to work with your code. Where should I put it? I have apps, controllers and services js-files. Thanks – Tommy Sollén Sep 11 '14 at 07:18

How to get a youtube playlist using javascript API and json

3 Answers3

Linked