Introduction
Embedded Video Players, based either on Adobe Flash™ or Microsoft Silverlight™ technology, could dramatically improve web page aesthetic appeal and overall user experience. This article demonstrates the coding technique for embedding the popular YouTube™ Video Player (which is built on the above mentioned Adobe Flash™) in ASP.NET web pages via an API written in C# and a Microsoft AJAX extension.
The project contains:
- The default web page "Default.aspx" with the corresponding code-behind: both to be placed in the Application root directory (ASP.NET 2.0+).
- Code module "YouTubeScriptGenerator.cs" to be placed in the App_Code directory.
- AJAX library file (AjaxControlToolkit.dll) to be placed in the Bin directory
A functional demo of the YouTube™ Player embedded in an ASP.NET web page is available at: www.webinfocentral.com/RESOURCES/VideoAudio.aspx.
Background
The Embedded Video Player would be capable of streaming (playing back) the audio/video content, available from the www.youtube.com website. You do not need to subscribe/logon to the site in order to utilize this feature. The content to be played is encrypted into a query string, looking like a random set of characters, for example: x_4CNvG1Q_M, and the corresponding full address string should look like: http://www.youtube.com/watch?v=x_4CNvG1Q_M (which is presumably pointing to the video clip titled: “Anastasia Volochkova dancing to Adiemus by Karl Jenkins).
The easiest way to embed the YouTube™ Video Player is to go to the www.youtube.com website, select the item of interest, and then copy/paste the corresponding snippet, located in the text box marked “embed”, into your own web page, and Voila! YouTube™ site provides several customization options regarding the video player size (this includes standard settings specified as: 340x285, 445x364, 500x405, 660x525) and color palette selection.
The ASP.NET YouTube™ API described in this article provides a much wider set of customization features.
Using the Code
The practical steps to embed the YouTube™ Video Player into an ASP.NET Web Page are as follows:
- Create or open an ASP.NET Web Site using either Microsoft Visual Studio 2008 (any edition) or the Visual Web Developer 2008 Express edition.
- Download the compressed (.zip) file. Extract the components into your web application directory.
- Set the embedded YouTube™ Video Player dimension: W/H.
- Customize the YouTube™ Video Player border options.
- Customize the YouTube™ Video Player startup settings:
- First item to play
- Autoplay mode
- Starting the Video/Audio streaming at a predefined time.
Following are the code snippets corresponding to the demo ASPX web page with the associated code-behind module:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"
tagprefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DEMO | YouTube API for ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server" updatemode="Conditional" >
<ContentTemplate>
<div>
<!---->
<asp:DropDownList ID="cmbPlaylist"
runat="server" AutoPostBack="True">
<asp:ListItem Value="XP9tzWtLFus">Anastasia
Volochkova(Adiemus)</asp:ListItem>
<asp:ListItem Value="raRaxt_KM9Q">Sound Of Silence
(Masters of Chant)</asp:ListItem>
</asp:DropDownList>
<br /><br />
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<h3>Sample Demo: Anastasia Volochkova, Russian prima ballerina
dancing "Adiemus"</h3>
<h4>Initial settings: 640x480, autoplay=0</h4>
<hr />
<h4>
More Demo available at:
<a href="http://www.webinfocentral.com/RESOURCES/VideoAudio.aspx"
target="_blank">www.webinfocentral.com</a>
</h4>
<hr />
</form>
</body>
</html>
The code-behind:
using System;
public partial class _Default : System.Web.UI.Page
{
private int _W = 640;
private int _H = 480;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
#region Start mode customization via Web Query String
int idx = 0;
int auto = 0;
string qry = "";
try {
qry = "auto";
qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
if (qry != "") { auto = int.Parse(qry); }
} catch { }
try {
qry = "item";
qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
if (qry != "") { idx = int.Parse(qry); }
} catch { }
#endregion
cmbPlaylist.SelectedIndex = idx;
Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, auto, _W, _H);
}
else
{
Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, 0, _W, _H);
}
}
}
Points of Interest
Smooth transition between video items is achieved by using the Microsoft AJAX extension: notice the UpdatePanel where resides the Literal1 control containing the corresponding JavaScript.
A video item to play could be passed via a Web Query as an index corresponding to the dropdown cmbPlaylist control. The auto-play option could also be set via a Web Query (see the example): www.webinfocentral.com/RESOURCES/YouTubeMusicVideo.aspx?item=2&auto=1.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin