I recently had to provide a code solution that retrieved a YouTube user’s favourite videos and displays them to a web page. Clicking on any one of this list of videos would then open that video in a new page ready to play. Luckily Google has set up an easy to use YouTube API for .NET we can use.

Google Developer Key and API DLLs

Before we start there are a couple of things we need to do. To access Google’s API we need a developer key. To sign up for a developer key go to http://code.google.com/apis/youtube/dashboard and follow the instructions. Once we have out key we need to get the Google API DLL’s to reference in our solution. We can do this one of 2 ways:

This is a wrapper for the video information we want returned from the YouTube API.

YouTubePlayer.cs

namespace BusinessObject
{
/// <summary>/// Wrapper for all the settings for the You Tube embedded player/// </summary>publicclass YouTubePlayer
{
public YouTubePlayer()
{
LoadRelatedVideos = 1;
AutoPlay = 0;
Loop = 0;
EnableJavaScriptAPI = 0;
PlayerAPIId = string.Empty;
DisableKeyboard = 0;
EnhancedGenieMenu = 0;
Border = 0;
PrimaryBorderColor = "#FFFFFF";
SecondaryBorderColor = "#FFFFFF";
SecondsFromStart = 0;
FullScreen = 1;
HD = 0;
ShowSearchBox = 0;
ShowVideoInfo = 0;
VideoAnnotations = 3;
}
/// <summary>/// Values: 0 or 1. Default is 1. Sets whether the player should load related videos once playback of the initial video starts. /// Related videos are displayed in the "genie menu" when the menu button is pressed. /// The player search functionality will be disabled if rel is set to 0./// </summary>/// <value>0 or 1</value>publicint LoadRelatedVideos { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads./// </summary>/// <value>0 or 1</value>publicint AutoPlay { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again /// and again. In the case of a playlist player (or custom player), the player will play the entire playlist and then start again at the first video./// </summary>/// <value>0 or 1</value>publicint Loop { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Setting this to 1 will enable the Javascript API. For more information on the Javascript API /// and how to use it, see the JavaScript API documentation./// </summary>/// <see cref="http://code.google.com/apis/youtube/js_api_reference.html"/>/// <value>0 or 1</value>publicint EnableJavaScriptAPI { get; set; }
/// <summary>/// Value can be any alphanumeric string. This setting is used in conjunction with the JavaScript API. See the JavaScript API documentation for details./// </summary>/// <see cref="http://code.google.com/apis/youtube/js_api_reference.html"/>/// <value>The player API id (any alphanumeric string)</value>publicstring PlayerAPIId { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Setting to 1 will disable the player keyboard controls. Keyboard controls are as follows: /// Spacebar: Play / Pause /// Arrow Left: Restart current video /// Arrow Right: Jump ahead 10% in the current video /// Arrow Up: Volume up /// Arrow Down: Volume Down/// </summary>/// <value>0 or 1</value>publicint DisableKeyboard { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Setting to 1 enables the "Enhanced Genie Menu". This behavior causes the genie menu (if present) to appear /// when the user's mouse enters the video display area, as opposed to only appearing when the menu button is pressed./// </summary>/// <value>0 or 1</value>publicint EnhancedGenieMenu { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Setting to 1 enables a border around the entire video player. The border's primary color can be set via /// the color1 (PrimaryBorderColor) parameter, and a secondary color can be set by the color2 (SecondaryBorderColor) parameter./// </summary>/// <value>0 or 1</value>publicint Border { get; set; }
/// <summary>/// Values: Any RGB value in hexadecimal format. This is the primary border color./// </summary>/// <value>RGB value in hexadecimal format</value>publicstring PrimaryBorderColor { get; set; }
/// <summary>/// Values: Any RGB value in hexadecimal format. This is the video control bar background color and secondary border color./// </summary>/// <value>RGB value in hexadecimal format</value>publicstring SecondaryBorderColor { get; set; }
/// <summary>/// Values: A positive integer. This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. /// Similar to the seekTo function, the player will look for the closest keyframe to the time you specify. /// This means sometimes the play head may seek to just before the requested time, usually no more than ~2 seconds./// </summary>/// <value>A positive integer</value>publicint SecondsFromStart { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button. This has no effect on the Chromeless Player. /// Note that you must include some extra arguments to your embed code for this to work. The param allowfullscreen of the below example enable fullscreen functionality:/// </summary>/// <value>0 or 1</value>// <object width="425" height="344">// <param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw&fs=1"</param>// <param name="allowFullScreen" value="true"></param>// <embed src="http://www.youtube.com/v/u1zgFlCw8Aw&fs=1"// type="application/x-shockwave-flash"// allowfullscreen="true"// width="425" height="344">// </embed>// </object>publicint FullScreen { get; set; }
/// <summary>/// Values: 0 or 1. Default is 0. Setting to 1 enables HD playback by default. This has no effect on the Chromeless Player. /// This also has no effect if an HD version of the video is not available. If you enable this option, keep in mind that users with a /// slower connection may have an sub-optimal experience unless they turn off HD. You should ensure your player is large enough to /// display the video in its native resolution./// </summary>/// <value>0 or 1</value>publicint HD { get; set; }
/// <summary>/// Values: 0 or 1. Default is 1. Setting to 0 disables the search box from displaying when the video is minimized. /// If the rel (LoadRelatedVideos) parameter is set to 0 then the search box will also be disabled, regardless of the value of showsearch./// </summary>/// <value>0 or 1</value>publicint ShowSearchBox { get; set; }
/// <summary>/// Values: 0 or 1. Default is 1. Setting to 0 causes the player to not display information like the video title and rating before the video starts playing./// </summary>/// <value>0 or 1</value>publicint ShowVideoInfo { get; set; }
/// <summary>/// Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotation to not be shown by default./// </summary>/// <value>1 or 3</value>publicint VideoAnnotations { get; set; }
}
}

This is a wrapper for embedding our YouTube player – we’ll need this later on.

Now we need to create our Common class library. The Google DLLs need to be referenced in this library. I add them to the web application bin folder and reference them from there as we will also need them referenced in the web application, but you can store them wherever you wish.

GlobalConstants.cs

I always have a class with stongly-typed items for use in my solution contained in this file.

I won’t go into too much detail here as the process is really quite simple. We have to build a YouTubeRequestObject which we then use to call different methods in the YouTube API. In this case we are using the GetFavoriteFeed() and Retrieve<Google.YouTube.Video>() methods to return the data we need.

And now on to the web application. To display our favourite feed videos we need to create an instance of the GoogleAPI in our Page_Load section and call the GetFavouriteVideosExtractedByUserName_List() method. I will bind the returned data to a repeater to keep things simple.

Now we have our video list from our favourite feed displaying nicely, it’s time to create a page to play the videos. To do this I pass the video id of the YouTube video in the querystring and use this to get the video from a YouTube API call to get the video information (title, description, etc.)

To display the player on the page we need to use the standard object and embed HTML tags. This HTML is set up in the GetPlayerCode() method in the GoogleAPI.cs class.

We have lots of options when displaying a video, all of which are covered in our YouTubePlayer class in the BusinessObject class library. Any options we want to include are added on tot he querysting of the video url we use in our embed HTML statement. Have a run through the code and it should all make sense. Leaving the settings as they are is fine – the video will work as you would expect – but it’s useful to have the wrapper available should you want to change any of the settings.

About me

I'm a .net C# web developer currently working for InsureandGo.com. In my spare time I'm either developing a website or working on a car. This blog is a collection of technical articles I've put together to share my adventures in programming. Happy reading :o)