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
– james, Commented Jul 3, 2011 at 0:22
Indeed, please reformat your code and double check what should be formatted as code / where line breaks should be. — kwah
– kwah, Commented Jul 3, 2011 at 0:33
@Lacy see my demo link 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
– plamen, Commented Jan 31, 2012 at 1:20

Community · Accepted Answer · 2017-05-23 11:52:23Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Jul 3, 2011 at 3:02

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

plamen Over a year ago

Tnx :) I try 1 weeek to fix this line :) you help me very much :)

plamen Over a year ago

tnx ... for first time i write here and i didn't know :) tnx alot :)

plamen Over a year ago

i have litle problem ...this function not work in internet explorer and opera... onli MOZILLA .... can you help me ?

codeandcloud Over a year ago

i will check and let you know:)

chrisallick Over a year ago

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.

ckng · Accepted Answer · 2012-09-27 05:39:25Z

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

chrisallick · Accepted Answer · 2014-06-18 19:47:24Z

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, 2014 at 19:47

chrisallick

1,4741 gold badge19 silver badges19 bronze badges

1 Comment

Tommy Sollén Over a year ago

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

Collectives™ on Stack Overflow

How to get a youtube playlist using javascript API and json

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related