I'm using Youtube API v2 for searching Youtube videos based on search terms in the following code:
- var searchTerm = $('.YTquery').val();
- $.getScript('https://gdata.youtube.com/feeds/api/videos?q=' + searchTerm + '&v=2&start-index=1&max-results=25&alt=json-in-script&format=5&callback=searchLookup');
... but I want to use that getScript code for displaying a list of clickable Youtube thumbnails
based on video IDs like in following modified code:
- var videoID = $('.video_id').val();
- $.getScript('https://gdata.youtube.com/feeds/api/videos/' + videoID + '?v=2&alt=json-in-script&callback=videoIDLookup');
I'm using getScript and json-in-script in order to allow cross-domain compatibility with browsers. I tried getJSON but nothing happens, perhaps I'm missing some more code...? I could use the search code and search for a video ID but where video IDs start with a hyphen, the search code interprets this as a youtube search filter and deletes the item, also, searching for IDs does not always display accurate results because some video titles contain the ID of another video.
Youtube recommends using the above proper syntax to retrieve videos based on an ID, and not use the search version. My added callback directs to videoIDLookup which is a modified jQuery function previously suggested here made to display a list of search term based video retrieval. I want the following function to display a list of clickable Youtube thumbnails based on video IDs, but so far nothing works:
- function videoIDLookup(data){
-
- var feed = data.feed;
- var entries = feed.entry || [];
-
- for (var i = 0; i < entries.length; i++)
- {
- var entry = entries[i];
- var pvideoTitle = entry.title.$t;
- var ptrimTitle = $.trim(pvideoTitle).substring(0, 45).split(" ").slice(0, 10).join(" ");
- var pthumbnail = entries[i].media$group.media$thumbnail[0].url;
- var ptotalSec = entries[i].media$group.yt$duration.seconds;
-
- hours = parseInt( ptotalSec / 3600 ) % 24;
- minutes = parseInt( ptotalSec / 60 ) % 60;
- seconds = ptotalSec % 60;
- var psortedTime = (hours < 10 ? "0" + hours : hours) + " Hours: " + (minutes < 10 ? "0" + minutes : minutes) + " Minutes: " + (seconds < 10 ? "0" + seconds : seconds) + " Seconds";
-
- $(".list").append('<li style="cursor:pointer;">' + '<img src="'+pthumbnail+'" style="vertical-align:top;margin-top:0px;"/><br/>' + '<span id="pvideo_content">' + '<span class="yt-title">'+pvideoTitle+'</span><br />' + '<span class="video_meta">' + '<span class="yt-time">'+psortedTime+'</span>' + '</span></span>' + '<input type="hidden" id="pvideo_title" value="'+ptrimTitle+'" /></li>');
- }
- }
Any hints? Thx for suggesting code that can help in providing a working solution. - dan
UPDATE: I tried this, and the video ID gets set, but I got "NetworkError: 400 bad request" :
- $.getScript('https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',function(data) {
- $.each(data.items, function(i,item){
- ... function ...
UPDATE: I tried this, but I got "
TypeError: a is undefined" (jquery.min.js 1.8.1 - line 2) :
- $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + array[i] +
'?v=2&alt=json-in-script&callback=?',function(data) {
- $.each(data.items, function(i,item){
- ... function ...
UPDATE: Where the NetworkError appears (400), this is how the urls display (in one line). All 25 urls show the same structure with their respective IDs:
https://gdata.youtube.com/feeds/api/videos/0KTWEFpDOis?v=2
&callback=?&_=1353520272172"
UPDATE: Got this in ajax and no errors except nothing happens:
- var array = $("#result").val().split(",");
- $.each(array,function(i){
- var requestUrl = 'https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2alt=json-in-script'
- $.ajax({
- url: requestUrl,
- type: "GET",
- dataType: "json-in-script",
- success: function(data){
- var videoLength = $(data.feed.entry).length;
- for(x=0; x<videoLength;x++)
- { ... function ...
UPDATE: In the instances where the above sample codes did not trigger errors in the console, an alert would display: [object Object]. Now what?
UPDATE: The following alert gives me the expected results, so why doesn't the callback function use this? Perhaps the script finishes too fast before activating the callback function?
- $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',
- function(data) {
- alert(array[i]); // prints all the video IDs as expected.
UPDATE: Culprit seems to be here, after console.log:
- $.getJSON('http://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',
- function(data){
- console.log(data); // TypeError: data.feed is undefined
- $.each(data.feed.entry, function(){
Bump!...