Project Description
ASP.NET Embedded Video Player (YouTube™ API, C#)

ARTICLES ON RIA TOPIC

  1. Rich internet applications, part 1: embedding YouTube™ video player into web page
  2. Rich internet applications, part 2: Silverlight™ media player
  3. Rich internet applications, part 3: HTML 5 video player
  4. How to customize YouTube video playback
  5. Facebook and YouTube popularity stats, Oct 2012
  6. YouTube All Times Best Videos (popularity stats updated April 1, 2013)

DEMO:

  1. Embedded YouTube with Playlist
  2. NEW!  WebTV broadcast from New York, daily updated (Beta)
  3. YouTube Video Player: ASP.NET API | HTML5
  4. Silverlight Media Player

ASP.NET API, writtent in C#, enables customization of the embedded YouTube™ video player, namely:

  • Setting the startup options
  • Selecting the item from the playlist,
  • Setting the autoplay mode
  • Setting player's dimension (W/H)
  • Changing the border options
  • Starting the video at predefined time

Click on the following image to open fully-operational WebTV app utilizing YouTube API for ASP.NET:

YouTubeSampleScreenshot.jpg

Fig.1. Sample screenshot of embedded YouTube Video Player (Anastasia Volochkova, Russian prima ballerina dancing to "Adiemus")

NOTE: ALL CONTENT/SAMPLES ARE SHOWN FOR INFORMATION PURPOSE ONLY.

Project contains:

1. Default Web page "Default.aspx" with corresponding code behind: both to be placed in Application root directory (ASP.NET 2.0+)
2. Class Library "youTubeEmbeddedPlayer.dll" to be placed in ASP.NET "bin" directory
3. Ajax Library file (AjaxControlToolkit.dll) to be placed in Bin directory

Sample Web Page contains a Literal1 control serving as a script container and a DropDownList control serving as a simple playlist:

(NOTE: ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY)

<%@ Page Language="C#" 
AutoEventWireup="true"  
CodeFile="Default.aspx.cs" 
Inherits="_DEMO" %>

<!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>ASP.NET Embedded Video Player | YouTube DEMO</title>
    </head>

    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Conditional" >
            <ContentTemplate> 
                <div>
                    <!-- ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY-->
                    <asp:DropDownList ID="cmbPlaylist" runat="server" AutoPostBack="True">
                        <asp:ListItem Value="x_4CNvG1Q_M">
                        Anastasia Volochkova dancing (Adiemus)
                        </asp:ListItem>
                        
                        <asp:ListItem Value="raRaxt_KM9Q">
                        Sound Of Silence (Masters of Chant)
                        </asp:ListItem>
                        
                        <asp:ListItem Value="8qSeYLhe09s">
                        For Whom The Bell Tolls (Bee Gees)
                        </asp:ListItem>
                    </asp:DropDownList>
                    
                    <br /><br />
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                </div>

                <asp:Button ID="Button1" runat="server" 
                Text="START AT 15 SEC" onclick="Button1_Click" />
                  
                <asp:Button ID="Button2" runat="server" 
                Text="START AT 60 SEC" onclick="Button2_Click" />
            
            </ContentTemplate>
          </asp:UpdatePanel>
          
          <hr />
          <h4>Sample Demo: Anastasia Volochkova, Russian prima ballerina is dancing "Adiemus"</h4>
          <h4>Initial settings: 640x505, autoplay=0</h4>
          <hr />
          <h4>
              More RIA Demo available at: 
              <a href="http://www.webinfocentral.com/RESOURCES/YouTubeMusicVideo.aspx" 
              target="_blank">www.webinfocentral.com</a>
          </h4>
          <hr />
        </form>
    </body>
</html>

Code behind page:

//****************************************************************************
// Module           :   Default.aspx.cs
// Type             :   ASP.NET web page code behind
// Developer        :   Alexander Bell (Infosoft International Inc)
// DateCreated      :   06/29/2009
// LastModified     :   10/18/2009

// Description      :   YouTube API for ASP.NET (DEMO)
//****************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//****************************************************************************

//****************************************************************************
// TERMS OF USE     :   ALL CONTENT IS SHOWN FOR DEMO PURPOSE ONLY
//                  :   You can use it at your sole risk
//****************************************************************************
using System;

public partial class _DEMO : System.Web.UI.Page
{
    #region init settings
    // player width
    private int _W = 640;

    // player height
    private int _H = 505;

    // autoplay disabled
    bool auto = false;
    #endregion

    #region Page Load event
    protected void Page_Load(object sender, EventArgs e)
    {
        
        if (!IsPostBack)
        {
            #region Start mode customization via Web Query String
            int idx = 0;
            string qry = "";

            // Web Query to set autoplay option
            try {
                qry = "auto"; 
                qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
                if (qry != "") { auto = Boolean.Parse(qry); }
            } catch { }

            // Web Query to set item index
            try {
                qry = "item"; 
                qry = (Request.QueryString[qry] == null) ? "" : Request.QueryString[qry];
                if (qry != "") { idx = int.Parse(qry); }
            } catch { }
            #endregion

            // set selected index
            cmbPlaylist.SelectedIndex = idx;

            // generate script on page load
            Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, auto, _W, _H);
        }
        else
        {
            // generate script on page postback
            Literal1.Text = YouTubeScript.Get(cmbPlaylist.SelectedValue, false, _W, _H);
        }
    }
    #endregion

    #region User events
    /// <summary>
    /// Script to start video at predefined time, change border color
    /// </summary>
    protected void Button1_Click(object sender, EventArgs e)
    {
       // set start time = 15 sec, change border colors
        Literal1.Text = 
        YouTubeScript.Get(cmbPlaylist.SelectedValue, true, 
        _W, _H, true, "maroon", "", 15);
    }

    /// <summary>
    /// Script to start video at predefined time, remove border
    /// </summary>
    protected void Button2_Click(object sender, EventArgs e)
    {
        // set start time = 60 sec, remove border
        Literal1.Text =
        YouTubeScript.Get(cmbPlaylist.SelectedValue, true,
        _W, _H, false, "", "", 60);
    }
    #endregion
}
Class Library source code
//******************************************************************************
// Module           :   YouTubeScript.cs
// Author           :   Alexander Bell
// Copyright        :   2009 Infosoft International Inc
// Date Created     :   06/29/2009
// Last Modified    :   07/18/2009
// Version          :   1.0.0.1
// Description      :   YouTube Player Javascript generator

//******************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//******************************************************************************

//******************************************************************************
// TERMS OF USE     :   This module is copyrighted.
//                  :   You can use it at your sole risk provided that you keep
//                  :   the original copyright note.
//******************************************************************************

using System;
using System.Text;

///*****************************************************************************
/// <summary>
/// Generate Javascript to embed YouTube Video Player in ASP.NET web page
/// </summary> 
public static class YouTubeScript
{
    #region YouTube Player default script: no autoplay, 320x240
    /// <summary>
    /// YouTube Player default script: no autoplay, 320x240
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">int</param>
    /// <returns>string</returns>
    public static string Get(string id)
    { return Get(id, false, 320, 240); }
    #endregion

    #region YouTube Player script w/autoplay option (320x240)
    /// <summary>
    /// YouTube Player script w/autoplay option (320x240)
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <returns>string</returns>
    public static string Get(string id, bool auto)
    { return Get(id, auto, 320, 240); }
    #endregion

    #region YouTube Player script w/autoplay option (320x240)
    /// <summary>
    /// YouTube Player script w/autoplay option (320x240)
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">int</param>
    /// <returns>string</returns>
    public static string Get(string id, int auto)
    { return Get(id, ((auto == 1) ? true : false), 320, 240); }
    #endregion

    #region YouTube Player script w/selectable: autoplay and W/H
    /// <summary>
    /// YouTube Player script w/selectable: autoplay and W/H options
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <returns>string</returns>
    public static string Get(string id, bool auto, int W, int H)
    { return Get(id, auto, W, H, true); }
    #endregion

    #region YouTube Player script w/selectable: autoplay, W/H and default border
    /// <summary>
    /// YouTube Player script w/selectable: autoplay, W/H, default border color 
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <param name="Border">bool</param>
    /// <returns>string</returns>
    public static string Get(string id, bool auto, int W, int H, bool Border)
    { return Get(id, auto, W, H, Border, "0x2b405b", "0x6b8ab6",0 ); }
    #endregion

    #region YouTube Player script w/selectable: autoplay, W/H and border color
    /// <summary>
    /// YouTube Player script w/selectable: autoplay, W/H and border color
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <param name="Border">bool</param>
    /// <param name="C1">string</param>
    /// <param name="C2">string</param>
    /// <returns>string</returns>
    public static string Get
            (string id,
            bool auto, 
            int W, 
            int H, 
            string C1, 
            string C2)
   { return Get(id, auto, W, H, true, C1,C2, 0); }
    #endregion

    #region YouTube Player script w/selectable: autoplay, W/H and border color
    /// <summary>
    /// YouTube Player script w/selectable: autoplay, W/H and border color
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="auto">bool</param>
    /// <param name="W">int</param>
    /// <param name="H">int</param>
    /// <param name="Border">bool</param>
    /// <param name="C1">string</param>
    /// <param name="C2">string</param>
    /// <returns>string</returns>
    public static string Get
            (string id,
            bool auto,
            int W,
            int H,
            bool Border,
            string C1,
            string C2, 
            int Start)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append(@"<embed src='http://www.youtube.com/v/");

        // select the youTube item to play
        sb.Append(id);

        // set autoplay options (indicates number of plays)
        if (auto) sb.Append("&autoplay=1");

        // no related items to display
        sb.Append("&rel=0");

        // set border color 1 and 2
        if (Border)
        {
            sb.Append("&border=1");
            sb.Append("&color1=" + @C1);
            sb.Append("&color2=" + @C2);
        }

        // start position
        if (Start>0) sb.Append("&start=" + Start.ToString());
        
        // allow full screen
        sb.Append("&fs=1");

        // closing single quote after parameter list
        sb.Append("' ");

        
        sb.Append("type='application/x-shockwave-flash' ");

        // add id
        sb.Append("id='youTubePlayer" + DateTime.Now.Millisecond.ToString() + "' ");
        sb.Append("allowscriptaccess='never' enableJavascript ='false' ");

        // set parameters: allowfullscreen
        sb.Append("allowfullscreen='true' ");

        // set width
        sb.Append("width='" + W.ToString() + "' ");

        // set height
        sb.Append("height='" + H.ToString() + "' ");

        sb.Append(@"></embed>");

        // get final script
        string scr = sb.ToString();

        sb = null;
        return scr;
    }
    #endregion
}
///*****************************************************************************************

ADDITIONAL ONLINE RESOURCES: 'HOW-TO':

  1. Scientific Calculator ZENO-5000, User Manual
  2. Scientific Calculator ZENO-5000, Design Notes
  3. How to select web browser and check its capabilities
  4. How to use online geocoders and interactive maps
  5. Search engine optimization and online concordance calculator

POPULAR ARTICLES:

  1. Personal Computer 2012
  2. Rich internet applications, part 1: embedding YouTube™ video player into web page
  3. Rich internet applications, part 2: Silverlight™ media player
  4. Rich internet applications, part 3: HTML 5 video player 
  5. HTML5 Best Practices: Table formatting via CSS3
  6. Nesting GridView controls in ASP.NET
  7. HTML5 best practices: Slide Show web application
  8. Online Engineering Calculator Volta-2011, Design Notes

SAMPLE PROJECTS':

  1. 3 Fractions Calculator (#1 on Google!)
  2. Interactive Motosport/NASCAR Map, Microsoft Bing™
  3. Payroll Tax Calculator
  4. TOP-50 DIGITAL CAMERAS BY iMARK-DCAM® RATING ENGINE

Last edited Apr 14 at 3:09 AM by DrABELL, version 29