Search jQuery

jQuery Forum

Using jQuery

jQuerydan

jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

in Using jQuery • 7 years ago

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!...

Replies(15)

jQuerydan

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

UPDATE: Displaying list of clickable Youtube thumbnails retrieved by their video IDs:

I observed a few dilemmas above regarding the topic, here is my temporary solution:

Simply enclose in double quotes the variable used to retrieve IDs using the Youtube search URL. The double quotes serve as a Youtube search filter for querying an exact search string (like a Google search), such as the following (see q= ):

var array = $("#result").val().split(",");
$.each(array,function(i){
$.getScript('https://gdata.youtube.com/feeds/api/videos?q=" ' + array[i] + ' "&v=2&start-index=1&max-results=1&alt=json-in-script&format=5&callback=searchLookup');
});

.. where array, in this project, represents the stored value of a string of video IDs separated by a comma. This way no hyphen or odd symbol composing the current Youtube ID will hinder the search process.

I still want to figure out how to achieve the same without searching for video IDs, with the following script:

$.getScript('https://gdata.youtube.com/feeds/api/videos/' +array[i] + '?v=2&alt=json-in-script&max-results=1&callback=videoidLookup');

That's where I am stuck... I get either a bad request (400) or the callback function cannot build the video list (feed.entry undefined). Any hints?

Here's a link that I am investigating, see the AJAX example (source code). A script tag is used to print via document.write the title, info, etc of a video ID, with a link to watch on Youtube. It appears you have to hard-code as many script tags as you want video IDs to be made available, which I do not want to do. Youtube Developers corner also provides demo code to play around with. I don't know enough jQuery saavyness to solve this, if it's solvable.

Anyone ever tackle this and have a solution? - dan

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

vid = 'iEabr6YUsFc'; // my video!
$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+ vid + '?v=2&alt=json-in-script&callback=?' ,function(data){
console.log(data)
})

Gives me info as JSONP for my first music baking video!

JΛ̊KE

jQuerydan

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

Yup. As mentioned in my previous post, the following does the job for any number of video IDs:

$.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.

So why doesn't function(data) print out the list of videos like in the example in my first post? I guess I need to alter some code (and the order) to reflect the format of callback and video list creation, this should be simple to resolve, but I am sorta noob to jQuery and Youtube API, so still spending long nights experimenting on this one. Maybe code that displays video playlists should be used? Any help is appreciated, thx again for ideas and solutions. - dan

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

Your 1 million updates to your own post made it impossible to follow, so I went to the last item only.

That JSONP request gives info for a single video.

In it, data is an Object and can not be alerted directly.

alert(JSON.stringify(data)) // works in modern browsers with JSON support!

I use console.log so I can see the data in the web inspector (webkit) or firebug(firefox) …

YouTube Data API helps you build any other query, just plug it in with &callback=? at the end for a jQuery getJSON call.

JΛ̊KE

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

That is not enough code for me to recreate the problem.

data.feed.entry is probably undefined.

You need to use a debugging tool to see what data is

console.log(data)

JΛ̊KE

jakecigar

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

see javascript - What is console.log and how do I use it? - Stack Overflow for links on how to use console.log

JΛ̊KE

jQuerydan

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

console.log doesn't print message starting at line 2:

"success": function(data){
var feed = data.feed; <---- TypeError: feed is undefined
var entries = feed.entry;
for (var i = 0; i < entries.length; i++)
{
var entry = entries[i];
var pvideoTitle = entry.title.$t;
var pthumbnail = entry.media$group.media$thumbnail[0].url;
var ptotalSec = entry.media$group.yt$duration.seconds;
var pvideoID = entry.media$group.yt$videoid.$t;
var ptrimTitle = $.trim(pvideoTitle).substring(0, 45).split(" ").slice(0, 10).join(" ");
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";

In fact, all the code above is "undefined". ;-(

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

What is data?

JΛ̊KE

jQuerydan

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

Trying to use this code: http://jsfiddle.net/tqWxc/851/
It's what I seek, I would add a button to initiate the function showing a list of clickable thumbnails that load their video in my embedded Youtube player. In the fiddle getJSON loads a playlist but I would replace the playlist id with a variable that grabs the value (video IDs) of an input text element. If you can spit some sample, be my guest and I'll test it. Thx ahead for your kind help. - dan

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

http://jsfiddle.net/jakecigar/tqWxc/852/ inserts an id for the get json call.

JΛ̊KE

jQuerydan

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

I finally got something less error-prone (no errors in Chrome or Firebug), and all the video IDs in var array show in Chrome Network tab (status code: 200 OK) but still no thumbnails display in the ordered list (.list):

$('#displayVideovlist').on('mouseup', function() {
var array = $("#result").val().split(",");
$.each(array,function(i){
var videoID = 'https://gdata.youtube.com/feeds/api/videos/'+array[i]+'?alt=json-in-script';
$.getJSON(videoID, function(data) {
$.each(data.feed.entry, function(i, item) {
var pvideoTitle = item.title.$t;
var pthumbnail = item.media$thumbnail[0].url;
var ptotalSec = item.yt$duration.seconds;
var pvideoID = item.yt$videoid.$t;
var ptrimTitle = $.trim(pvideoTitle).substring(0, 45).split(" ").slice(0, 10).join(" ");
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 : minute ) + " 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+'" /><br /><input type="text" class="pvideo_ID" value="'+pvideoID+'" /></li>');
});
});
});
});

Certainly missing something here! Starting to lose it LOL! It's gonna be a loong nite! - dan

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

Post a full example of the problem or a link to where your code is. I can’t recreate from snippets.

JΛ̊KE

jQuerydan

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

Here's a fiddle:

http://jsfiddle.net/zAYWG/13/

Gosh, all I want is to have those two video IDs to display their thumbnails in the appended Li's once the button is clicked. In the app the thumbnails are clickable (that part of code is done) and the video IDs will either be dynamically inserted in #result or typed in manually. I have no clue why it doesn't work like a Youtube search URL does. I guess I'm seeing cross-eyed! Thx for tryin' - dan

jakecigar

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

That JSON response is TOTALLY different from the previous.

You need to write different code after looking at what data comes back from the 2 JSON requests.

This is closer

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('#displayqrcvlist').on('mouseup', function() {
var array = $("#result").val().split(",");
$.each(array, function(i) {
var videoID = 'http://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?';
$.getJSON(videoID, function(data) {
// console.log(data)
// window.data=data
var entry = data.entry
var pvideoTitle = entry.title.$t;
var pthumbnail = entry.media$group.media$thumbnail[0].url;
var ptotalSec = entry.media$group.yt$duration.seconds;
var pvideoID = entry.media$group.yt$videoid.$t;
$("ol").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">' + '<input type="text" class="pvideo_ID" value="' + pvideoID + '" /></li>');
});
});
});
})
</script>
<title>displayqrcvlist</title>
</head>
<body>
<button id="displayqrcvlist">Display</button>
<input type="text" id="result" value="G3aYPt4rz-o,bf3Y8eSA0pg" />
<ol></ol>
</body>
</html>

JΛ̊KE

jQuerydan

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

7 years ago

I applaud your dedication in helping newbies like me see the "light". I couldn't get this sort of dedication in other forums, and I thank everyone here in jQuery Forum for sharing, without restrictions, their helpful knowledge to others. My web app is near completion, and I will freely share it to all who want to make it work better. Stay tuned. - dan

Top Reply

Response title

Attachments

jQuery Forum

jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Replies(15)

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Re: Re: jQuery 1.8.2 | Display list of clickable Youtube thumbnails based solely on video IDs?

Statistics

Tags

Actions