jTube – Not Just for Javascript

John Hoover — Sat, 12 Jun 2010 14:53:51 +0000

My jQuery YouTube API plugin, jTube, has now been ported to a PHP class. The two work similar in the fact that you set a query type (user uploads, feed, playlist, etc.) and set some options. Below is an example:


include("jTube.Query.php");
 
$oVideos = new jTubeQuery;
$oVideos->setQuery("user", "defvayne23", "uploads");
$oVideos->setOption("limit", 5);
 
try {
	$aVideos = $oVideos->runQuery();
} catch(Exception $e) {
	die($e->getMessage());
}
 
// Use $aVideos

With the PHP class jTube can now make use of authentication and with that the entire YouTube API. The YouTube API allows for anything from uploading a video to supplying feedback on a video (rate, comment, flag). The PHP class already can make use of authentication tokens to retrieve private info for the user that belongs to the token. The first new functionality coming to the PHP class is video managing and upload.

Checkout jTube for PHP on github now.

jQuery Weather Plugin – simpleWeather

John Hoover — Mon, 17 May 2010 14:30:35 +0000

monkeeCreate has release another jQuery plugin developed by James Fleeting that uses the Yahoo Weather API to pull in weather data by just passing it a zipcode. Using simpleWeather is alot like jTube in the sense that you pass the zipcode and a function to handle the results. Example of some of the results passed back are high, low, sunrise, sunset, wind direction, current conditions and forecast.

Checkout simpleWeather on jQuery Plugins and GitHub.

Using jTube – Video and Thumbnail

John Hoover — Fri, 14 May 2010 16:08:21 +0000

This is the final post of the series that has so far covered the very basics of showing a list of video titles, to paging of the list using jTube. In this post I will discuss how to embed a video using jTubeEmbed which comes with the jTube jQuery plugin, also how to show the video thumbnail provided by YouTube. To show these features off I will modify where we left off in the paging tutorial and show the video for the first entry of the page then show the thumbnail for the other videos on the page.

To show the video only on the first video we need to modify the each loop to tell us where we are in the loop. Simply add `index` as the first parameter received.

12	$(videos).each(function(index) {

Now that we know what position we are in the loop, we can check if we are on the first video. Simply add an if statement that checks if the index is 0 (first). If we are on the first, embed the video, otherwise show the link with the title and length. To embed the video we will use the jTubeEmbed function. Only thing it requires is the video url. That is given with the key `video`. In this tutorial we can access that with `this.video`. If you choose not to pass the width and height option, the embed defaults to 290x250px. In our demo we will pass in the dimensions 200x172px so they fit snug in our page. These options are passed in similar to jTube but they go in as a second parameter. We should also show the video title below the video, but not link it since we already have the video.

            videoHTML = '';
 
            if(index == 0) {
                videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172});
                videoHTML += this.title;
            } else {
                videoHTML += '+this.link+'" target="_blank">';
                videoHTML += this.title;
                videoHTML += ' - '+this.length;
            }
 
            videoHTML += '
';

Now that we have the video showing up lets add the thumbnail. Each video that jTube returns we have a url for the thumbnail, accessible with the key `thumbnail`. This will return the image url which you can put as the source in your img tag. To not overflow the page with large thumbnails, also set the width to 200px to match the video and height to 150px to keep the aspect ratio.

19
20
21

                videoHTML += '+this.link+'" target="_blank">';
                videoHTML += '+this.thumbnail+'" width="200" height="150">
';
                videoHTML += this.title;

That should sum it up for this series of jTube tutorials. I have now covered getting users uploaded videos, success function, error function, paging, limit number of videos per page, videos from YouTube feeds, embed video using jTubeEmbed, and thumbnails.

Next series will cover user feeds including subscriptions and playlists. Including getting the videos from those playlists.

If you have any request for help or tutorials either leave a comment or submit a comment.

Complete Code:

<script type="text/javascript">
var currentPage = 1;
var options = {
    feed: 'top_rated',
    limit: 12,
    page: currentPage,
    success: function(videos, numberPages) {
        $('#myVideos').html('');
        $('#currentPage').html(currentPage);
        $('#numberPages').html(numberPages);
 
        $(videos).each(function(index) {
            videoHTML = '';
 
            if(index == 0) {
                videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172});
                videoHTML += this.title;
            } else {
                videoHTML += '+this.link+'" target="_blank">';
                videoHTML += '+this.thumbnail+'" width="200" height="150">
';
                videoHTML += this.title;
                videoHTML += ' - '+this.length;
            }
 
            videoHTML += '
';
 
            $('#myVideos').append(videoHTML);
        });
 
        //Back
        if(currentPage != 1) {
            $('#pageBack').removeClass('disabled').unbind('click').click(function(event) {
                currentPage = currentPage - 1;
                options.page = currentPage;
                $.jTube(options);
                event.preventDefault();
            });
        } else {
            $('#pageBack').addClass('disabled').unbind('click').click(empty);
        }
 
        //Next
        if(currentPage < numberPages) {
            $('#pageNext').removeClass('disabled').unbind('click').click(function(event) {
                currentPage = currentPage + 1;
                options.page = currentPage;
                $.jTube(options);
                event.preventDefault();
            });
        } else {
            $('#pageNext').addClass('disabled').unbind('click').click(empty);
        }
    },
    error: function(error) {
        $('#myVideos').append(''+error+'
');
    }
};
var empty = function(event) {event.preventDefault();};
 
$("#pageBack, #pageNext").click(empty);
$.jTube(options);
script>

Back - Page 1 of 1 - Next

Defvayne23.com

jTube – Not Just for Javascript

jQuery Weather Plugin – simpleWeather

Using jTube – Video and Thumbnail

Complete Code:

View Demo

Keep up with jTube