Defvayne23.com » Tutorial http://defvayne23.com A blog by John Hoover Fri, 27 Jan 2012 22:10:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Using jTube – Video and Thumbnail http://defvayne23.com/2010/05/14/using-jtube-video-and-thumbnail/ http://defvayne23.com/2010/05/14/using-jtube-video-and-thumbnail/#comments Fri, 14 May 2010 16:08:21 +0000 John Hoover http://www.defvayne23.com/?p=66 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.

13
14
15
16
17
18
19
20
21
22
23
24

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

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 += '<a href="'+this.link+'" target="_blank">';
                videoHTML += '<img src="'+this.thumbnail+'" width="200" height="150"><br>';
                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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<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 = '<li>';
 
            if(index == 0) {
                videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172});
                videoHTML += this.title;
            } else {
                videoHTML += '<a href="'+this.link+'" target="_blank">';
                videoHTML += '<img src="'+this.thumbnail+'" width="200" height="150"><br>';
                videoHTML += this.title;
                videoHTML += '</a> - '+this.length;
            }
 
            videoHTML += '</li>';
 
            $('#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('<li class="error">'+error+'</li>');
    }
};
var empty = function(event) {event.preventDefault();};
 
$("#pageBack, #pageNext").click(empty);
$.jTube(options);
</script>
<ul id="myVideos"></ul>
<a href="" id="pageBack" class="disabled">Back</a> - Page <span id="currentPage">1</span> of <span id="numberPages">1</span> - <a href="" id="pageNext" class="disabled">Next</a>

View Demo

Keep up with jTube

Share

]]> http://defvayne23.com/2010/05/14/using-jtube-video-and-thumbnail/feed/ 8 Using jTube – Paging http://defvayne23.com/2010/05/12/using-jtube-paging/ http://defvayne23.com/2010/05/12/using-jtube-paging/#comments Wed, 12 May 2010 17:43:45 +0000 John Hoover http://www.defvayne23.com/?p=65 In my previous post I covered the basics of showing a users uploaded videos. In this tutorial we will go over how to implement paging. To really show off paging, I have changed the request to top rated videos.

First we need to break our video options into a variable so we can re-use them when calling the other pages. This allows us to easily change the page number and leave all the other options intact.

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var options = {
    feed: 'top_rated',
    success: function(videos, numberPages) {
        $(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>');
    }
};
 
$.jTube(options);


Now that we have the options broke out, lets create some other variables that we will be using. We will need to keep track of the current page so create a variable currentPage with the default value of 1. Also a function that ignores the click of the paging link by preventing the default link behavior.

2
3
4
5
6

var currentPage = 1;
var options = {
    // ...
};
var empty = function(event) {event.preventDefault();};

Now lets modify the HTML to add our paging links below our videos.

24
25

<ul id="myVideos"></ul>
<a href="" id="pageBack" class="disabled">Back</a> - <a href="" id="pageNext" class="disabled">Next</a>

Pretty simple so far. Now lets start adding click events for the paging links. First we need to make sure that when they click the links at first nothing happens so we attach the empty function for onClick before we make the first call to jTube.

22
23

$("#pageBack, #pageNext").click(empty);
$.jTube(options);

Next we need to add the option for paging to tell the plugin what page we are requesting. Lets also up the amount of videos from the default 5 to 12.

4
5
6
7

    feed: 'top_rated',
    limit: 12,
    page: currentPage,
    success: function(videos, numberPages) {

Now we have a page that shows 12 videos with two dead links for paging. Lets add a click event to `next` if we are not on the last page, else we attach the empty function. When we attach the event for next page we also remove the class for disabled so we can show the user the link works. If we reach the last page we re-add the disabled class and remove any clicking events.

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

            $('#myVideos').append(videoHTML);
        });
 
        //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);
        }
    },

Since we use append to add the videos, clicking next adds the next page to the page we are already on. So lets clear the list before we add the new videos.

7
8
9
10

    success: function(videos, numberPages) {
        $('#myVideos').html('');
 
        $(videos).each(function() {

Now the user can go traverse forward through the pages, but what if they want to go back? Simple, do the same as next but subtract from the currentPage.

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

            $('#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

Here is what we have so far. Looks great, but its missing something. How about we tell the user what page they are on, and how many pages they can go through. First we need to add the HTML where that info will go.

53
54

<ul id="myVideos"></ul>
<a href="" id="pageBack" class="disabled">Back</a> - Page <span id="currentPage">1</span> of <span id="numberPages">1</span> - <a href="" id="pageNext" class="disabled">Next</a>

All that’s left is updating the span elements each time we change the page.

7
8
9
10
11
12

    success: function(videos, numberPages) {
        $('#myVideos').html('');
        $('#currentPage').html(currentPage);
        $('#numberPages').html(numberPages);
 
        $(videos).each(function() {

We now have paging so the user can see all our videos. In the next post I will discuss embedding the video and showing a thumbnail.

Complete Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<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() {
            videoHTML = '<li>';
            videoHTML += '<a href="'+this.link+'" target="_blank">';
            videoHTML += this.title;
            videoHTML += '</a> - '+this.length;
            videoHTML += '</li>';
 
            $('#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('<li class="error">'+error+'</li>');
    }
};
var empty = function(event) {event.preventDefault();};
 
$("#pageBack, #pageNext").click(empty);
$.jTube(options);
</script>
<ul id="myVideos"></ul>
<a href="" id="pageBack" class="disabled">Back</a> - Page <span id="currentPage">1</span> of <span id="numberPages">1</span> - <a href="" id="pageNext" class="disabled">Next</a>

View Demo

Keep up with jTube

Share

]]> http://defvayne23.com/2010/05/12/using-jtube-paging/feed/ 1 Use GD – 2a: Not Modified http://defvayne23.com/2010/05/11/use-gd-2a-not-modified/ http://defvayne23.com/2010/05/11/use-gd-2a-not-modified/#comments Tue, 11 May 2010 20:31:09 +0000 John Hoover http://www.defvayne23.com/?p=59 When creating an image with PHP per call, why should the server have to create the image every time. In part two of using GD I’ll show how to use the 304 Not Modified header, and storing the image as cache.

To start we need to pass more info about the image from the previous post. Need to pass the last modified date and time, tell the browser that it can cache it and for how long, when the image would expire and an ID for the file.

41
42
43
44
45

header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
header("Pragma: public");
header("Cache-Control: maxage=".(60*60*24*2));
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
header("ETag: ".md5($sFile));


Now that the browser knows this info, it will pass it back in the next call. We use this info to check to make sure the browser has the right file, and if so, tell the browser that the file has not changed and use what it already has. We pass all the headers from before again so the browser has them for the next time it calls for the image. Once all the headers are passed we must exit so we don’t do process that isn’t needed.

7
8
9
10
11
12
13
14
15
16

if ($_SERVER["HTTP_IF_MODIFIED_SINCE"] == gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT"
  && $_SERVER["HTTP_IF_NONE_MATCH"] == md5($sFile)) {
	header('HTTP/1.1 304 Not Modified');
	header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
	header("Pragma: public");
	header("Cache-Control: maxage=".(60*60*24*2));
	header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
	header("ETag: ".md5($sFile));
	exit;
}

Now lets put it all together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// Set image info
$sFile = "image.jpg";
$aInfo = getimagesize($sFile);
list($sWidth, $sHeight, $sType) = $aInfo;
 
// Check if file is cached in the browser
if ($_SERVER["HTTP_IF_MODIFIED_SINCE"] == gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT"
  && $_SERVER["HTTP_IF_NONE_MATCH"] == md5($sFile)) {
	header('HTTP/1.1 304 Not Modified');
	header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
	header("Pragma: public");
	header("Cache-Control: maxage=".(60*60*24*2));
	header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
	header("ETag: ".md5($sFile));
	exit;
}
 
// Load image
switch($sType)
{
	case IMAGETYPE_GIF: $oImage = imagecreatefromgif($sFile); break;
	case IMAGETYPE_JPEG: $oImage = imagecreatefromjpeg($sFile); break;
	case IMAGETYPE_PNG: $oImage = imagecreatefrompng($sFile); break;
	default: die("Image type not found");
}
 
$sCropOffsetX = 148;
$sCropOffsetY = 119;
$sCropWidth = 350;
$sCropHeight = 275;
 
$oCrop = imagecreatetruecolor($sCropWidth, $sCropHeight);
imagefill($oCrop, 0, 0, imagecolorallocate($oCrop, 255, 255, 255));
 
// Crop image onto canvas
imagecopyresized($oCrop, $oImage, 0, 0, $sCropOffsetX, $sCropOffsetY, $sWidth, $sHeight, $sWidth, $sHeight);
imagedestroy($oImage);
 
$sMime = image_type_to_mime_type($aInfo);
header("Content-type: ".$sMime);
header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
header("Pragma: public");
header("Cache-Control: maxage=".(60*60*24*2));
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
header("ETag: ".md5($sFile));
 
switch($sType)
{
	case IMAGETYPE_JPEG: imagejpeg($oCrop); break;
	case IMAGETYPE_PNG: imagepng($oCrop); break;
	case IMAGETYPE_GIF: imagegif($oCrop); break;
	default: die("Image type not found");
}
imagedestroy($oCrop);

Share

]]> http://defvayne23.com/2010/05/11/use-gd-2a-not-modified/feed/ 0