Using jTube – Basics | Defvayne23.com

Using jTube – Basics

This is the first post in a line of uses for jTube. In this post I will show the basics of getting a users upload list and using the info. Before we start make sure that you have included the latest jQuery and latest jTube.

For jTube to work you must tell it what feed to grab by passing the info to the correct option. The only one we need to worry about today is `user`. Using the users feed has an option that accompanies it. The option userType tells what info about the user to retrieve. By default jTube loads the users uploads. Lets take a look at that.

<script>
$.jTube({
    user: 'defvayne23'
});
</script>

With the above code jTube gathers the users ‘defvayne23′ (me) uploads. But nothing is shown. We have to pass a success function so we can use the videos. The success function is passed two variables, videos and number of pages. The videos variable contains an array of videos, each containing info about that video.

<script>
$.jTube({
    user: 'defvayne23',
    success: function(videos, pages) {
        $(videos).each(function() {
            alert(this.title);
        });
    }
});
</script>

Now that we have our success function, lets do something more useful than throw an alert box at the user. Lets create a list of the videos linked to the video page.

<script>
$.jTube({
    user: 'defvayne23',
    success: function(videos, pages) {
        $(videos).each(function() {
            videoHTML = '<li>';
            videoHTML += '<a href="'+this.link+'" target="_blank">';
            videoHTML += this.title;
            videoHTML += '</a> - '+this.length;
            videoHTML += '</li>';
 
            $('#myVideos').append(videoHTML);
        });
    }
});
</script>
<ul id="myVideos"></ul>

Pretty simple. Loops the videos. With each video creates a list item, and within it a link on the title to the video and the video link next to the title. Then appends the HTML to the list. The above would produce: (I don’t have many videos, so this list is for `twofivethreetwo)

<ul id="myVideos">
<li><a href="http://www.youtube.com/watch?v=7_Iw2nEROBg&amp;feature=youtube_gdata" target="_blank">Changing | 1 Minute Short</a> - 1:01</li>
<li><a href="http://www.youtube.com/watch?v=wrsI4GXOzdc&amp;feature=youtube_gdata" target="_blank">Chase Spelling</a> - 2:42</li>
<li><a href="http://www.youtube.com/watch?v=VqroSjIlrJc&amp;feature=youtube_gdata" target="_blank">City floods the street again</a> - 0:44</li>
<li><a href="http://www.youtube.com/watch?v=ZPwy27-lj70&amp;feature=youtube_gdata" target="_blank">At DQ going to Kansas</a> - 0:55</li>
<li><a href="http://www.youtube.com/watch?v=7xqVnhYTbKc&amp;feature=youtube_gdata" target="_blank">Spray Park</a> - 3:55</li>
</ul>

What happens when something goes wrong with getting the feed like youtube being down. Lets add the option error to handle when we get an error.

<script>
$.jTube({
    user: 'defvayne23',
    success: function(videos, pages) {
        $(videos).each(function() {
            videoHTML = '<li>';
            videoHTML += '<a href="'+this.link+'" target="_blank">';
            videoHTML += this.title;
            videoHTML += '</a> - '+this.length;
            videoHTML += '</li>';
 
            $('#myVideos').append(videoHTML);
        });
    },
    error: function(error) {
        $('#myVideos').append('<li class="error">'+error+'</li>');
    }
});
</script>
<ul id="myVideos"></ul>

Pretty simple. We put the error in the same place we put our videos, but added a class of error so we could style it with maybe a red border to let the user know we had issues.

This is only a small portion of what you can do with jTube. Next post will cover how to handle paging and number of videos.

Keep up with jTube

May 7, 2010

Tags: Javascript, jQuery, jTube, Plugin, Tutorial, YouTube | View Comments

View Comments to “Using jTube – Basics”

James Fleeting on May 7th, 2010 at 10:40 am

This plugin is just awesome. Messing with any API is an uphill battle for most people but with jTube just a few lines of code and you can pull in just about anything from YouTube and list however you want.
Tweets that mention Using jTube – Basics -- Topsy.com on May 7th, 2010 at 10:43 am

[...] This post was mentioned on Twitter by James Fleeting and John Hoover, monkeeCreate. monkeeCreate said: Working with the YouTube API? @defvayne23 just posted an article on using his jTube plugin and how easy it is. http://goo.gl/fb/NsuGM [...]
Neil MacLean on May 11th, 2010 at 5:27 pm

This is great. I now have a lovely, if short, list of videos and I shall probably refresh this site constantly looking forward to part 2
In the meantime, is there a demo page with examples of what jTube can do? I can't see anything on the main jquery site. Thanks
John Hoover on May 11th, 2010 at 5:53 pm

Thanks for the comment. Send me a link when you start using jTube. Would like to create a gallery of sites using it.

I have setup a temporary demo page. http://youtube.defvayne23.com/

Plan to setup a more permanent one on http://monkeecreate.com
Neil MacLean on May 12th, 2010 at 5:10 am

Wow, looks great. I am still trying it out on my local machine but look forward to discovering how to pull out thumbnails and videos for a live site. Thanks again.
Neil MacLean on May 12th, 2010 at 10:10 am

Wow, looks great. I am still trying it out on my local machine but look forward to discovering how to pull out thumbnails and videos for a live site. Thanks again.

Defvayne23

Twitter

Flickr