Product videos can help an ecommerce business boost sales. How-to videos and entertainment marketing may attract hoards of potential customers. So it should be little wonder if your company or your clients want to include video onsite or in an application.
While there are several ways to go about adding videos to an ecommerce site, one popular model is to host these videos on YouTube—they can even be hosted as private videos if you're concerned about duplicate content—and then embed them in your site project.
Of course, these videos can be individually pasted into place, but who wants to do that? Rather, in this tutorial, I am going to demonstrate how to use the YouTube API and Google Gdata PHP Client Library to populate your pages with a YouTube video stream.
Step No. 1: Get the Gdata PHP Client Library
Google's Gdata PHP Client Library is part of the Zend Framework, but it can also be downloaded as a standalone release. To get Gdata, grab a tar ball or zip file from the Zend Framework site.
You will need to place the included "library" folder on your server and tell PHP where to find it. The most straightforward way to point to the Gdata library is to add it as an include path in your php.ini file.
To learn where you need to make the addition, type the following code into a PHP file stored on your server and open that file in your web browser.
<?php phpinfo() ?>
The result will be a page full of information about your PHP installation, including a line that identifies the loaded PHP configuration file.
Within the php.ini file identified as the loaded configuration file, find the lines of code that look like the following.
;;;;;;;;;;;;;;;;;;;;;;;;; ; Paths and Directories ; ;;;;;;;;;;;;;;;;;;;;;;;;; ;UNIX: "/path1:/path2" ;include_path = ".:/php/includes " ; Windows: "\path1;\path2" ;include_path = ".;C:\php5\pear;C:\php\includes "
Select your server type, and add the path to the Gdata library. For this example, I am working in WAMP, thus I add the appropriate path to "Windows." You may need to un-comment the line too.
;;;;;;;;;;;;;;;;;;;;;;;;; ; Paths and Directories ; ;;;;;;;;;;;;;;;;;;;;;;;;; ;UNIX: "/path1:/path2" ;include_path = ".:/php/includes " ; Windows: "\path1;\path2" include_path = ".;C:\php5\pear;c:\php\includes;C:wamp\www\Test-scripts\YouTube-examples\library"
With the new path in place, I need to restart my server for the changes to take effect.
Paths and configuration files can vary greatly from one installation to the next. Also, if you are using a low-budget hosting service, you may not have access to your php.ini file, in which case you may need to use the .htaccess file to point to Gdata.
Step No. 2: Require the Zend Loader
Now that I have Gdata on my server, I need to require the Zend Loader.php file. I am going to be wrapping my PHP in some basic HTML, too.
<?php /** *YouTube example */ ?> <!doctype html> <html lang="en"> <head> <title>YouTube PHP API Example</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <h1 class="header">Video Gallery</h1> <?php require_once 'Zend/Loader.php'; ?> </body> </html>
Step No. 3: Load the Zend_Gdata_YouTube Class
Next, I need to load the ZendGdataYouTube class.
Zend_Loader::loadClass('Zend_Gdata_YouTube');
So far, my PHP looks like this:
<?php
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_YouTube');
Step No. 4: Get the YouTube Feed for a Particular User
The YouTube client library allows me to compose queries, return popular searches, or even upload videos. But for our purposes, I am just going to get the feed for a particular user. This is analogous to a merchant hosting videos on YouTube and then displaying those videos on site.
For the example, I am going to get the feed for Blendtec, a maker of excellent blenders, which has more than 300,000 subscribers to its YouTube channel.
function getUserVideos($username){
$yt = new Zend_Gdata_YouTube();
manageVidFeed($yt->getuserUploads($username));
}
The function is very straightforward. It establishes a new instance of ZendGdataYouTube and then uses the getuserUploads helper to pass a particular feed to a second function, manageVidFeed.
You'll notice that the function accepts the username associated with the specific feed I want to show. When I call this function later in my document, I will pass it "blendtec" as the username.
Step No. 5: Parse Out the Video Content
Once I have access to the Blendtec YouTube stream, I need to place a title and a video on my page. I am going to do this by building out some embed code similar to what someone might copy and paste from the YouTube site.
function manageVidFeed($videos){
foreach($videos as $video){
echo '<h3>' . $video->getVideoTitle() . '</h3>';
echo '<p><object id="theplayer" width="1000" height="587">';
echo '<param name="movie" value="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US"></param>';
echo '<param name="allowscriptaccess" value="always"></param>';
echo '<embed src="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed>';
echo '</object></p>';
}
}
getUserVideos('blendtec');
This function receives the video feed from the getUserVideos function created in the previous step.
function manageVidFeed($videos){
Next, this function iterates through the feed, acting on each individual set of video data.
foreach($videos as $video){
A series of echo statements place the appropriate HTML markup on the page for each iteration. A single echo statement was all that was really required, but I divided it up to make the code easier to read.
The important things to notice in this section of code are how I am using getVideoTitle and getVideoId to place each video title in an <h3> tag and each video's unique id inside of the URL that I am creating.
echo '<h3>' . $video->getVideoTitle() . '</h3>'; echo '<p><object id="theplayer" width="1000" height="587">'; echo '<param name="movie" value="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US"></param>'; echo '<param name="allowscriptaccess" value="always"></param>'; echo '<embed src="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed>'; echo '</object></p>'; }
Finally, I call the getUserVideos function, passing it the "blendtec" username.
getUserVideos('blendtec');
The complete page code now looks like this:
<?php
/**
*YouTube example
*/
?>
<!doctype html>
<html lang="en">
<head>
<title>YouTube PHP API Example</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<h1 class="header">Video Gallery</h1>
<?php
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_YouTube');
function getUserVideos($username){
$yt = new Zend_Gdata_YouTube();
manageVidFeed($yt->getuserUploads($username));
}
function manageVidFeed($videos){
foreach($videos as $video){
echo '<h3>' . $video->getVideoTitle() . '</h3>';
echo '<p><object id="theplayer" width="1000" height="587">';
echo '<param name="movie" value="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US"></param>';
echo '<param name="allowscriptaccess" value="always"></param>';
echo '<embed src="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed>';
echo '</object></p>';
}
}
getUserVideos('blendtec');
?>
</body>
</html>
The resulting output is a series of some 24 Blendtec videos neatly arrayed on my page.
Summing Up
To make this tutorial easier to read (shorter), I have divided it into segments. In this first segment, I have used PHP to retrieve a user-specific video feed and place a series of video titles and embedded Flash videos on page.
In the next segment, I will add some conditional statements and a style sheet to organize those videos.
Related Articles
- A Look at Audio and Video Elements in HTML 5
- “Video for Everybody” Gracefully Degrades
- Hover-to-Play Ecommerce Videos with HTML5, CSS, and JavaScript
